Published in Web Development on Monday, March 15th, 2004
While chatting back and forth in a post on Webmasterworld yesterday, something interesting came up that I have never thought about before. In short, should heading tags be used to mark up sections of a website like 'navigation' or 'site search'?
Normally, I would group sections of an html document in div's and use id's to name the sections, generally reserving heading tags for what I would consider the 'real content' of the page in question.
I'm beginning to think that marking up the other sections with headings can be done, and that it would increase the semantics of an html document.
The official specs say that heading tags briefly describe[s] the topic of the section it introduces
.
Now, up until now I've pretty much only ever used heading tags for describing the section of the content in question, that is, with respect to the content of the page.
What came up in the thread on Webmasterworld was should the heading tags be used for marking up the other sections of the page as well?
Sections such as 'navigation' and 'site search' can realistically be considered sections of the html document, though they aren't content in the sense of what I think of when I think content.
At this point I thought that it may be tough to work these sections into my document and retain a decent hierarchy of the heading tags and not disturb the visual 'design' of the document. However, upon reflection there is no way why this shouldn't be possible with CSS.
Using both the ability to position sections of your document with CSS and the ability to hide elements, you can get around two obstacles from using this method:
An example if the idea can be seen below. The <h2> elements would be hidden, being there purely for semantic purposes that are usually not an issue when viewing a page on screen.
<h1>Main Title Goes Here</h1> <div id="content"> <h2>Content</h2> Content goes here... </div> <div id="Navigation"> <h2>Navigation</h2> Navigation goes here... </div>
In the end this smells a lot like accessibility, and I definitely think that it improves the overall semantics of a page. I would love to hear what others think of this, and in particular:
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
I apologize in advance to anyone who tries to post code in comments. An upgrade to the comments will likely happen this weekend, until then though, buena suerte!
For those interested in semantics, have a look at your documents using the Semantic Data Extractor, an interesting way to look at a page, and see how your page may look to other types of users (like SE bots, for example).
Mike, I do use this kind of code. One unique h1 for each page, h2s for:
I think this use of headings is very accessible regarding the specs, makes much sense when using user agents like mobiles, pda and so on, can help in case of search engine optimization - but: hide the headings (the h2s) for "normal" browsers, as their users probably won't need them.
Best,
Lars
Good to hear. That's pretty much exactly what we're doing on a site thats supposed to launch this week...
Here's the outline of a website with this method of heading hierarchy, and here's the page in question.