Using a Logical Document Outline

Published Tuesday, November 13, 2007 in (X)HTML, Accessibility, Semantics, Web Standards

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

  1. There must never be more than 1 h1 per document
  2. The h1 must appear before any other heading
  3. It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)
  4. An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what's document outline looks like (pretty much):

  • h1
    • h2 Navigation
    • h2 Recent Articles
      • h3 A recent article
      • h3 Another recent article
        • h4 Sub-heading to recent article
    • h2 Search
    • h2 Recent Comments
    • h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

How do you do it? What do you think about this approach? Do tell.

Bookmark It

  • Digg
  • Furl
  • Google
  • Technorati
  • Ma.gnolia
  • BlinkList
  • Blogmarks
  • Rojo
  • StumbleUpon


9 comments so far, why don't you post one too?


Wednesday, March 04, 2009 | View all comments by bart

What do you think of this website's heading structure? In a way I like it, especially because of the headings themselves and the way the article is organized, but it's also missing the accessibility aspect.


Thursday, March 05, 2009 | View all comments by Andreas

@Bart - I think that if the document only consists of one article then the article's title should be the h1 (like on that page).

But since that page really contains more modules than just the article-module ("Our top recommendations" and "More resources" in the left column for example) I don't think it makes sense to first not use headings for the other modules and second make the article's title the super-heading of those two modules.

I don't see how the "Our Top Recommendations"-heading is a sub-heading to the article-title...


Thursday, March 05, 2009 | View all comments by bart

Not sure if it's me or what, but your captcha just ate two of my attempted posts. I have 20/20 vision and I can't tell whether the letter is u or a v.


Thursday, March 05, 2009 | View all comments by Andreas

Hehe I know, it's rubbish. I'm working on a completely new blog and I'll get rid of it in this version.


Friday, March 06, 2009 | View all comments by Andreas

I should probably make this more information more accessible but you can actually click the CAPTCHA to generate a new one. I normally do that till I'm sure of what it says. But it's still shite, I agree.


Tuesday, March 10, 2009 | View all comments by bart

How about this: 1. Use skip link table of contents to jump to structural page sections. 2. Don't use structural labels 3. Use content/article headings only

This gives a good mix of accessibility and SEO. Your way has too much redundancy between pages and may look to SEs like duplicate content.

Check out the structure of this page:

I like the idea of h1 for logo and h1 for article title, but the h1 for logo should include text and image replacement for the logo.


Tuesday, March 10, 2009 | View all comments by Andreas

Hmm.. I see what you're saying but I don't like the idea of having to structure my code just to please Google or anyone else.

To me this type of structure makes perfect semantic and logical sense and that, to me, is most important.

I use this structure on my own site and have to say it seems Google understands quite well what is actual content (changes from page to page) and what is just the surrounding widgets.


Monday, March 16, 2009 | View all comments by bart

I actually read somewhere on Google Webmaster Tools that they consider h2 more important than h1. Maybe they're taking into account that a lot of people use h1 for company name/logo?


Monday, March 16, 2009 | View all comments by Andreas

Hmm that's interesting - you wouldn't happen to have a source?

If they do then that sure sounds like a valid reason...

Comments closed

Comments are closed

Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

February 2016

1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29

Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Random Quote

- Turbo

Random Images

Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)

Blog Roll