HTML semantic practice

Question

I read about semantic HTML online ...

Semantic HTML means using HTML tags for their implied meaning, and not just using (meaningless) div and span tags for absolutely everyone.

If you use <h1> instead of <div class="header"> and <h2> instead, and so on, Google and other search engines will interpret your headings as important headings on your page. Thus, when people search for words in headings and subheadings, your page will be considered more relevant (and higher). Plus, it is much shorter and cleaner.

So below is semantic,

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

How 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 as above - is this practiced as lack of semantic ?

The reason I have a class with a hide class is because I want to display the site logo instead of text. So use CSS to set the h1 background as an image and then hide the text. is this a bad practice?

Then, if I do not use a div, what can I use to make the field around h1 and h2?

As far as I know, html 5 is not completely ready yet, we should not use <header> , but should we

Thanks.

Answer 1

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

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

Answer 2

Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I tested it, I was not able to set CSS values ​​for the <header> tag, for example. Therefore, for now, I would recommend that you continue to use div tags to group semantic values.

As a side code, Google does not like hidden text, and if you have a lot of it, it will consider it to be deceptive coding. One of them is probably fine, but you better use the alt attribute in the image tag.

Answer 3

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

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

Remember to add display: block; to HTML5 and createElement elements for IE in CSS. The heading element indicates that this block is a heading, and the hgroup element indicates that the second h * element is a subheading, so it cannot be taken into account when calculating heading levels in a document.

If you do not want to use HTML5, then you can use divs instead of new elements and use HTML5 element names as the class value. This will simplify the transition if you are comfortable using HMTL5 on a live site.

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

Answer 4

No one suggested that you shouldn't use DIVs at all ... semantic HTML does not mean that div or span tags cannot be in your code. It simply means that whenever possible (there is a specific tag available for a particular semantic meaning), you should try to give semantic meaning.

h2 should not be used for taglines, as someone else has already said.

Also, in my interpretation (some will argue), h1 is not for the name of your site. This is the title for the content on a specific page.

Answer 5

I agree with @David Dorward, the tag line should be in the p tag.

Your example (wrapping header elements with a div ) is quite acceptable, although I would like to take a little care: be careful that you are not used to wrapping everything in div tags. For instance:

 <div class="content"> <div class="list"> <ul> <li>something</li> <li>something</li> <li>something</li> </ul> </div> </div> 

Since the ul tag is already a block element, the above markup would be better:

 <div class="content"> <ul class="list"> <li>something</li> <li>something</li> <li>something</li> </ul> </div> 

And then just draw ul to look like a div .

Regarding the display of the logo as an image:

If your logo is based on text or has text in it, you would be better off doing the following:

HTML

 <div id="header"> <h1 class="logo">My Logo Text - My Website Tagline</h1> </div> 

CSS

 .logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;} /* Also add height and width based on your logo height and width */