Heading into semantics
This post has been a long time coming, it is a subject that has been in the back of my mind for some time since first discussing it on the lovely Boagworld forum.
Semantics as many other aspects of “web design” is a little bit of a grey area, the current HTML spec is open to some interpretation especially when it comes to headings.
It seems a lot of web sites use the H1 element to mark-up there site name/branding and use some image replacement to remove the text and add a logo. This is straight forward using Andy Clarke’s MIR technique, the code would be.
<h1 class="mir">Site Name</h1>
and the CSS
.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/**/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */
h1.mir{
width:400px;
height: 185px;
background:url(logo.gif) no-repeat;
}
So as I said simple, actually no. Personally I feel using a H1 element in this way is fundamentally wrong. In this post I am going to look at the semantic reasonings behind it’s wrong use. Firstly lets have a look at the actual HTML spec;
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
There are six levels of headings in HTML with H1 as the most important and H6 as the least. Visual browsers usually render more important headings in larger fonts than less important ones.
Ok let me draw your attention to the most important part of that quote.
A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
A heading describes the topic of the section it introduces, now forgive me if I am wrong but how can your site name/branding introduce your content? Lets take this post for an example, my site Proverbial Monkey is a blog and in no way does the name/branding describe a post about semantics and headings.
Another thing you may not have picked up in that quote is that they make specific reference to the document not the web site or any other part of the web other, the document. We can assume here that by using that word, headings relate to the document and not the site.
Another example would be an e-commerce website selling mobile phones lets call this company Phones2U. Now on a page showing and detailing a Nokia N95, having a H1 as Phones2U does not add any semantical meaning about what is on the page. Using the following as the H1 would do “Nokia N95 specification” however.
Ok so what do I do instead? Good question, here’s the answer. Simply use an anchor with the above image replacement technique to show your branding / site name.
Remember, your content is the most important aspect of your site not it’s name!
