The Hard Facts about Heading Structure

Be sure to read my latest post on this subject, as things have changed.

The following is republished from the Tech Times #157.

Something I’ve had to get used to in my work as a so-called web technology expert is having my assumptions proven wrong every now and then. Languages like HTML can seem deceptively simple at times, and even after years of experience there can be important lessons left for you to learn.

Not long ago I learned a hard lesson about heading structure in HTML, one that I suspect many web designers will also be surprised to learn. In a nutshell, heading structure is independent of document structure in HTML documents.

Let’s start with something we can all agree on. If you’re writing an HTML document that is simply an article or other body of text with a single title and a number of subheadings, you should use <h1> for the title and <h2> for the subheadings. If your subheadings themselves contain subheadings, those should be marked up with <h3>, and so on.

<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h3>Sub-subheading</h3>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>

Looks reasonable so far, right?

Now, if this is a typical web page, it will also have some navigation elements, and perhaps some secondary content, such as related forum discussions. Each of these sections of the page will have a heading of some kind, but what heading tag would you use?

To some extent, your answer might depend on how you think. If your first reaction is that this additional content is less important than the article, you might write something like this:

<div class="navigation">
  <h2>Navigation</h2>
  <ul>...</ul>
</div>
<div class="article">
  <h1>Article title</h1>
  <p>Lorem ipsum dolor sit amet...</p>
  ?
</div>
<div class="discussion">
  <h3>Related Discussion</h3>
  <ul>...</ul>
</div>

This wouldn’t be an unreasonable assumption to make, and certainly the W3C’s HTML Validator would be perfectly happy with it, but in fact it seriously hurts the accessibility of your site.

The W3C’s Web Content Accessibility Guidelines 1.0 (WCAG) clarifies this in its discussion of section headings:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not "skip" levels (e.g., H1 directly to H3).

So in fact, because the navigation, article, and related discussion are all at the same level within the structure of the page (whatever their relative importance), they should all begin with <h1> headings.

Taking the example further, the page will probably have some kind of top-level heading or logo with the name of your site in it. Clearly this should be marked up with an <h1> tag, but how does this affect the rest of the document?

Here’s where the hard lesson that I recently learned comes in. I had come to think of the <div> tag as a tool for dividing up a document into "sub-documents". Following this line of thinking, you might be tempted to do something like this:

<h1>My Site</h1>
<div class="navigation">
  <h1>Navigation</h1>
  ?
</div>
<div class="article">
  <h1>Article Title</h1>
  ?
</div>
<div class="discussion">
  <h1>Related Discussion</h1>
  ?
</div>

Because each heading in the above code is the top-level heading within the <div> tag that contains it, it might seem sensible to use <h1> for every one.

This can be particularly tempting if you’re using a content management system of some kind to write the article content separately, and then insert it into the page dynamically. When working on the article in isolation, the article’s title is the top-level heading, so using an <h1> seems to make sense. When you place that article in the context of a full web page, however, that is no longer the case.

Although they can add structure to your document that you can use when applying styles with CSS, <div> tags and other block-level elements do not have a bearing on the heading structure of your document. From WCAG 1.0 again:

Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to improve presentation (e.g., the HR element to create a horizontal dividing line), but visual presentation is not sufficient to identify document sections.

Because assistive technologies like screen readers allow users to navigate through a document by its heading structure, your headings need to form a sensible structure independent from the rest of your document markup. So in our example above, each section of the page should begin with <h2>:

<h1>My Site</h1>
<div class="navigation">
  <h2>Navigation</h2>
  ?
</div>
<div class="article">
  <h2>Article Title</h2>
  ?
</div>
<div class="discussion">
  <h2>Related Discussion</h2>
  ?
</div>

To test the heading structure on your own site, you can use the W3C’s Semantic Data Extractor to view the outline of your document, based on its heading structure.

You’ll note that the front page of SitePoint doesn’t do too well on this test, so don’t feel too bad if your site doesn’t hold up on this front either. It just goes to show that I’m not the only one at SitePoint who has learned this lesson the hard way. You can bet that this will be fixed in the next redesign of sitepoint.com!

Be sure to read my latest post on this subject, as things have changed.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://autisticcuckoo.net/ AutisticCuckoo

    I don’t agree that the site name or logo should be marked up as an H1 (except possibly in /index.html). The H1 should contain the document heading; something that explains what this page is about. Web pages exist in isolation. There is no ‘site’ concept in HTML.

    A complex document that deals with several distinctive topics could use multiple H1′s, but should ideally be broken into multiple documents instead.

    The main question is then: how do we indicate ‘sections’ like navigation, sidebar, footer, etc.? It depends.

    Structurally they may be on the same level as the main content, thus theoretically warranting H1′s of their own. There’s something about this that feels jarring to me, although I cannot put my finger on in.

    I’m inclined to consider those sections as being part of the page. Thus I’d use an H2 for the navigation menu. It’s just a personal opinion, though; I’m not saying it’s the only correct way to do it.

  • http://www.vbhackers.com Ken Iovino

    I have always skipped headings and I’ve wondered if that was a bad practice or not. I’m glad I read this blog. Thanks Kevin!

  • obes

    I concur with AutisticCuckoo. I’m of the opinion that there should be only one H1 per page, and that each page of a website should have a unique and descriptive H1. I normally markup navigation and secondary content as H2.

  • N51

    I’m surprised you were surprised by this. I thought representing the structure of the document through hierarchical header stucture was a pretty basic guideline.

    I disagree with AutisticCuckoo. It seems to me that the use of the h1 tag you’re describing is what the title tag is for. I think h1 should be the site name so that none graphical users know that they haven’t left your site as they move from page to page. It’s the same as using consistent styling and layout for graphical browsers.

  • http://www.xraysierra.com XraySierra

    I fully agree with your post Kevin. I think that site accessibility is very important plus proper markup is important. I think there will be some external benefits in the future as search engines will shift towards reading proper site structure and such. Great post, keep up the good work!

  • http://www.xhtmlcoder.com/ xhtmlcoder

    It is probably better explained in ISO-HTML, yes you can use topology and such though usually you should think hierarchy. H1 Major section header, H2 Section header, H3 Subsection header, H4 Subsubsection header … H6 Minor subsubsubsection header.

    Essentially H1 – H6 just define the start of a section rather than containing the “section” and some examples are poor or confusing. They used a generic DIV because they didn’t have a SECTION element. Though obviously DIV has no real major authority specifically for a Hn element and section either.

    Personally I agree with Tommy about pages being their own entities. Since H1 is usually the mother it makes little sense to have additional subsections as h1 in the same document. Technically you’ve just defined the document and it would remind me of ‘definition list’ abuse to use several H1 just for the sake of a link appearing in the same page because it just happens to be within a section.

  • http://lantner.net/david davidlantner

    In addition to content management systems being article-oriented (as mentioned in the article), sometimes the users don’t understand the difference between the presentational aspects of heading tags and the semantic aspects; some users use headings simply to mark text as big and bold in the browser. Educating them takes time and articles like this will help, especially since this is a more complicated issue than it seems.

  • http://guepy.com/greg picasso-trigger

    i’ve always shared the same opinion as AutisticCuckoo and this is something that actually bugs me about WordPress … the site name is always H1 … drives me nuts.

    that said, i want to do this the correct way, whenever i do anything for clients i’ve always used h1 as the document title, for the sake of seo more than anything … it’s always made sense to me that the title of the document would be your H1. i must admit, accessibility has never really been the forefront of my concern … clients want se rankings. but it’s not like se’s publish concrete rules on this topic.

    i assume that to a search engine, 100 documents with 100 H1′s of “My Company, Inc.” would be counter productive when trying to rank those docuemnts for a specific topic.

  • http://guepy.com/greg picasso-trigger

    … and the last example makes no sense to me at all …

    h1 = site name, then the nav, article title and the comments all share equal importance?

    that just sounds plain wrong to me. i don’t see why the navigation needs to be a heading … it’s navigation … not a heading related to the document.

    but i’m certainly not the authority on this subject, so i’ll be watching this space.

  • http://chris.unigliding.co.uk Stormrider

    I don’t agree there can’t be multiple H1s per page. H1 is a top level heading, which doesn’t at all imply that it should be the ‘page heading’, and the only one on the page. It is just what it says, a top level heading.

    For a page title, there is a handy tag…

    Of course if you want the page title displayed on the page as well, there is nothing WRONG with using an H1 tag for that, and then everything else as H2 and below, but I don’t think it is right to say that there should always only be one H1 tag on a page.

  • http://www.realityedge.com.au mrsmiley

    Everyone seems to have missed the implications of what Kevin has raised. It’s not a matter of how many H1′s, H2′s etc you are supposed to put in a page, its the location of each in your markup that is critical. I’m ignoring the container issue for now :)

    According to the guidelines, headings appear in level order. H1, before H2, etc. It’s not different to say building a table of contents structure in a Word document in that regard, except the rules in this case specifically state you cant skip levels. eg. H1, followed by H3.

    Those proponents of one H1 per page are also suggesting that you cant have multiple chapter headings in a book on a single page as well by deduction. Think of a web page not as a singular page, but more of a canvas. If I were to publish an entire printed book into a single web page, I should be able to mark each chapter heading as H1 if I want to.

    The wider implication here is what is presentational vs structural page flow. Search engines and accessibility validators read raw markup (structure), not page flow once it has been styled (presentational). Don’t confuse the two. Try viewing your site through Lynx or some other such text browser to get an inkling of what I’m referring to.

    Weirdly enough, this issue mostly exists due to the advent of multi column page layouts on the web.

    If your markup has a left nav, middle content, right nav (typical 3 column layout), and you have the markup in that exact same order, rather than reordering it on screen with say CSS … AND if you (as most of us do) use say a H2 as a heading for your left and right navs, then you have clearly violated the ordering rules. This is because, automated programs read the H2 first. Our eyes are drawn to the H1, but the machine isn’t biased by presentation.

  • Fre420

    there is an ez workaround to get your headers placement ok.
    absolute positioning.
    for the top navigation. You give your content container a top margin. & place your top navigation in the html beneath the content, position it absolute.
    same for the left nav.
    The content is placed right, then give it a left margin, & place the left nav absolute (under the content in the html).

    this wa

  • Fre420

    this way every page starts with a H1, right beneath it the content of the page (most important thing of the page). Then you get the left nav (more important then the head nav for that page), then the head nav, then the footer.
    All content is placed in order of importance, all Headers are placed rigth

  • [rb]

    Roger Hudson did a study on the “content first” technique which was briefly popular a while back and found that most screen reader users found little benifit and some found it confusing. The technique came into being without any real thought or study into what the requirements for visually impaired users were.

    I prefer to only have one H1 on my pages but theres no reason why you cant have a H1 for your sitename – styled graphicly followed by a H1 for the page title so it will read:
    SITENAME
    PAGETITLE
    … the rest …

  • http://www.lunadesign.org awasson

    Kevin,
    What a timely article! I just began building an online store for one of our clients with which I’ve structured the document content using headings for semantic sense.

    I too spent a bit of time working out how it all should fit together and it’s nice to see that your article backs up my approach. (phewww… you never can be too sure)

    Andrew

  • http://www.calcResult.co.uk omnicity

    Kevin,
    Can you explain what evedance you have for your assertion:

    This wouldn’t be an unreasonable assumption to make, and certainly the W3C’s HTML Validator would be perfectly happy with it, but in fact it seriously hurts the accessibility of your site.

    In what way does this hinder access to a site? I understand why you think that it does not conform with the guidelines, but the ultimate test is the end user, not a W3C spec.

  • http://johnwozniak.com wozbk

    I actually am thinking hard about this and some of the related issues right now as I work to get Textpattern’s code totally to my taste.

    My gut says that an H1 sitename is fine as not all web pages are sites per se and a sitename is in some sense a parent heading for all that will follow just as if I published an “unbranded” one page technical paper with the H1 as the document title (as the page would lack a “sitename”).

    For right now, I have a title of course, an H1 sitename and a

    , using the p tag instead of an H2 which I had been using (per some HTML Dog article I read at one point).

    With this setup, the H2 ends up being my defacto page/parent section header.

    Taking this compromise further and wrapping the sitename with

    might be the the way to go, that way the H1 can be left for the actual page title like “Contact”, “About” or whatever.

    I am still kickin’ the tires on this one…

  • inoodle

    Very timely article. I was thinking about this sort of issue recently. It can become an issue when writing reusable controls. Since there is no way of knowing where in the page a control will be instantiated, its not really valid to use any heading element at all, and therefore you’d be relegated to using generic spans and css classes.
    I’ve taken to injecting a ‘topLevelHeading’ integer into reusable controls so that they can then use that to determine where the heading hierarchy should begin. eg if I inject 3, then the top level heading would be h3 within that control.
    Another thing I’m doing at the moment is to use h1 as the element for the current page in the top navigation. This usually means it would come first in document order.

  • Jan Eric Hellbusch

    As a screenreader user and with a little bit of experience in constructing web sites I find that two things should be distinguished:

    1. content as in “article”
    2. the rest as in “navigation” or other sections

    I don’t think the content needs to be discussed.

    As a screenreader user I find differing concepts for the rest of the page difficult to learn on different web sites. OK driving all headings is one way to get through, but I usually am not able to aim at particular parts of the navigation, because the headings may be coded with h1, h2 or something else such as p or span.

    I find it important, that all headings in navigation should be identical. I also think they should not conflict with content headings.

    What do we do? We set all headings which have nothing to do with the content to h6. This has three reasons:

    1. h6 is out of the content heading hierarchie (i.e. it functions as a label, which is missing in HTML 4 and XHTML 1) for lists or divisions.
    2. it is easy to use and also to remember. Incidentally switching frames and similar is done with F6.
    3. It is not only visible headings we are talking about. Information should be grouped and labeled, e.g. a navigation is a list and the label? Yes, an invisible text. For practical reasons a heading is suitable, because a screenreader can jump to it.

    We have done this on a number of German sites since 2005.

  • Me

    (Moderator – please permit this – it is kind of important and clarifies some common errors!)

    Hmmm, this may sound harsh….
    But has anyone ever compared websites to books?

    Same structure applies – nothing difficult or complicated in it.

    = Book Title
    = Chapter Title
    = Section Title
    Sub sections, comments, references etc.

    What is so suprising in this?
    Sorry, but yet again it is a standard case of people not thinking before doing.

    You wouldn’t read a menu where each type of Meal or Food Type is the same heading size as the menu cover…. you’d think it stupid.

    You wouldn’t look at a leaflet/pamphlet that had humongous text slapped all over the place – you’d deem it amaturish.

    So why even conceive of it for your clients sites?

    Please people, think… logic always comes through with a little thought.
    Don’t view your pages with styling… view it as a simple, linnear document in black and white… see the order of what occurs and ask yourself

    “does that make sense?”

    If not – it is wrong.

    Simple!

    Best of luck to all those that wish to follow such examples.

    As a useful hint (rather than this being viewed as a whinge!)…

    = Site Title (the company name etc,)
    = Main sections (Main Nav, Sub Nav, Content, Footer etc.)
    = Sub Sections (Mebnu1, Menu2, Content section etc.)
    = Titles… (Sub titles for the Content etc.)
    = Not likely to be used unless you are referencing other works.

    Nothing complicated or clever!

    Whizzy-Whizz Books Ltd.

    Main Nav

    Site Nav

    Site Links!

    Store Nav

    Store Links!

    Main Content (could be Title for that page!)

    If you have sub sections

    There – follow that and you’re laughing.
    As to using Keywords within tags… not sure on that one…
    Think of Screen Readers etc.
    Would you want to read a Menu that went…

    MENU – Main Courses, Desserts, Drinks
    MAIN COURSES – Roasts, Vegetarian, Vegain, Jacket Potatoes etc.
    DESSETS – Ice cream, Steamed Puddings etc.

    NO – you wouldn’t!
    You expect a Title to be that – A TITLE!!!!!!
    No funny Comments, Characters or strange words appearing afterwords!

    So again, think Logically!

  • watershed

    This is a great article but there’s only one thing I feel I’ve taken from it with absolute certainty and that’s not skipping levels of heading – a lesson well learned in itself.

    I’m still troubled, however, by a number of aspects:

    1. The supposedly ‘simple’ approach of viewing a web page as part of a book
    2. Jan Eric, a screenreader user, advocates a structural approach that is at odds with Kevin’s recommendations
    3. The issue of how search engine algorithms regard heading structures today

    The analogy of a web page being like part of a book is a bit facile. It’s more like an isolated part of a book with a TOC (table of contents) linking to other isolated pages, or maybe a magazine page with a main article and a number of ancillary ones and a TOC.

    For this reason, Jan Eric’s point about making a distinction between the semantic structure of the content and the semantic structure of the other page content such as navigation seems to make sense.

    Finally, whilst I understand the structure advocated by Kevin and reiterated by the previous moderated post (is there some stuff stripped out there?), I’m troubled by the outcome of the main article title becoming an h2: not so much from an accessibility perspective as from an SEO one. My understanding (and maybe this is flawed or outdated) is that right now the dominant search engine algorithms like to see the main content focus of the page to be present in both the title (critical) and the h1. Semantically, that makes good sense to me. As Autistic Cuckoo says:

    The H1 should contain the document heading; something that explains what this page is about. Web pages exist in isolation. There is no ‘site’ concept in HTML.

    Given the above, what then is the best way to structure headings for both accessibility and search engine friendliness?

    Kevin, please clarify!

  • Anonymous

    can a h1 follow a h2 like

    title
    sub title
    what ever………………….

  • Anonymous

    sorry, can a h1 follow a h2 like

    heading
    sub heading
    what ever......................

  • Anonymous

    heading