Semantic HTML Practice

Question

I read about semantic HTML online...

Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.

If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.

So, below is semantic,

<h1>My Website Name</h1>
<h2>My Website Tagline </h2>

What about this below?

<div id="header">
  <h1><span class="hide">My Website Name</span></h1>
  <h2><span class="hide">My Website Tagline</span></h2>
</div>

I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?

The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?

Then, if I don't use div, what can I use to make a box around the h1 and h2?

As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??

Thanks.

Answer 1

I would do something like the following if I was going to use HTML5:

<header>
  <hgroup>
    <h1>My Website Name</h1>
    <h2>My Website Tagline</h2>
  </hgroup>
</header>

Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.

If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.

You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.

Answer 2

If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).

<div id="header">
  <h1><img src="foo.png" alt="My Website Name"></h1>
  <p><img src="foo.png" alt="My Website Tagline"></p>
</div>