Document Structure and Semantics Re-examined

Published in Web Development on Monday, March 15th, 2004

What's the story here?

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 specs

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.

Can it be done?

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:

  1. By hiding the headers that perhaps aren't necessary for the 'visual document', you can both increase the semantics and accessibility of the document without affecting the visual style.
  2. Have a look at the example below. By positioning your content above your navigation, you can use a first-level heading tag to mark-up the main topic of the content page and the section of the page that holds the content, and later use another first-level heading tag to mark up the section that holds the navigation, for example. The same could be done with a search box. By ensuring that the content (and therefore the heading for the content) comes first, you will be sitting well with the search engines.

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>

What it boils down to

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:

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:

  • content
  • top navigation (often named as "contents of www.xyz.com"
  • sub navigation
  • standards (contact, masthead etc., often simply called "about"

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...

Home » Blog » Web Development

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

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:

The Principles Of Successful Freelancing

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 Art & Science Of JavaScript

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.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

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..