Headings, heading hierarchy, and document outlines

Recently my coworkers and I have been discussing HTML headings and heading hierarchy. This may not sound like something you need to spend a lot of time discussing, but there are some situations when it seems very difficult to find a solution without compromises.

The importance of headings

First a little detour about the function and importance of headings in HTML. If you already know why headings are important, feel free to skip to the next section.

HTML headings, created with the h1-h6 elements, are very useful and should be used for anything that visually looks or acts like a heading. This is partly because it is the semantically right choice, partly because it may help your search engine rankings. But the most important reason is that using real headings improves accessibility.

Screen reader users, for instance, can use keyboard shortcuts to skip from heading to heading in a document. To see this in action, check out Importance of HTML Headings for Accessibility, a video showing how a screen reader user navigates a document by skipping from one heading to another. Likewise, some browsers allow keyboard-only users to use shortcuts to skip from heading to heading, speeding up navigation through a document.

So there are several reasons to use headings, and to use them properly.

Requirements for a good document structure

The outcome of the discussions we’ve been having at the office is a number of requirements or statements, some based on what “feels right”, others based on accessibility guidelines and general best practice. What it boils down to are the following rules of thumb:

  • Each document should have a logical heading structure that starts at level 1 and doesn’t skip any levels
  • Anything that visually looks like a heading should be marked up as a real heading
  • The title of the document’s main content should be a level 1 heading
  • There should be only one level 1 heading in each document

The question I haven’t been able to find a clear answer to is this: what do you do when the document’s main heading is not the first text that should be marked up as a heading? Insert a “dummy” h1 heading at the top of the document? Let the document start with an h2 heading and give up on creating a perfect document outline? Something else?

Heading guidance

In search of some guidance, I looked at what WCAG 2.0 has to say, and found the following among the documents describing techniques for WCAG 2.0.

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

G141: Organizing a page using headings

In this example, the main content of the page is in the middle column of a 3-column page. The title of the main content matches the title of the page, and is marked as h1, even though it is not the first thing on the page. The content in the first and third columns is less important, and marked with h2.

H42: Using h1-h6 to identify headings

Update: Roberto Scano pointed out that these techniques refer to different WCAG 2.0 success criteria with different conformance levels.

H42: Using h1-h6 to identify headings is a sufficient technique for Success Criterion 1.3.1 (Info and Relationships), which is Level A, while G141: Organizing a page using headings is a sufficient technique for Success Criterion 2.4.10 (Section Headings), which is Level AAA.

So according to WCAG 2.0 it is more important to mark up headings as headings than to have a perfect heading hierarchy.

Possible options

Based on this I can see two viable options:

  1. Give up on the first heading necessarily being an h1, and use lower level headings before the document title (like the second WCAG 2.0 example does).
  2. Make sure the organisation’s logo is early enough in the markup to always be able to serve as the first heading and make it an h1. Use lower level headings for any headings that come between the logo and the document title, which you also make an h1 heading.

I am leaning towards option 2, which could give a site with a three-column layout the following basic markup and heading structure:

  1. <div id="header">
  2. <h1><img src="logo.gif" alt="Organisation name"></h1>
  3. <h2>Main menu</h2>
  4. <ul>
  5. <li></li>
  6. </ul>
  7. </div>
  8. <div id="nav-sub">
  9. <h2>Sub menu</h2>
  10. <ul>
  11. <li></li>
  12. </ul>
  13. </div>
  14. <div id="content-primary">
  15. <h1>Page title</h1>
  16. <p>Page content.</p>
  17. </div>

The “Main menu” and “Sub menu” headings can, if the design requires it, be hidden visually but still provide guidance for screen reader users.

For people who use them to navigate, headings being marked up as real headings is likely to be more important than the document outline being perfect. Still, starting a page with a lower level heading just doesn’t feel right. On the other hand, having two h1 headings in the same document is seen as incorrect by some, as is making the logo a heading.

Like I said at the beginning of this post it’s hard to find a solution without compromises.

Four questions. Any answers?

So, some questions for anyone who might have some answers:

  1. Do you have a better suggestion than the above options?
  2. If not, which option would you say is best, and why?
  3. Many recommend using only one h1 heading on a page. Why, exactly, and what problems would using two (or more) level 1 headings create? Some concrete examples would be nice.
  4. Does it matter to screen reader users and others who use headings for navigation what level the first heading in a document is?

Here’s hoping for some good and conclusive answers (which is why comments are enabled for this post).

Translations

This article has been translated into the following languages:

Posted on January 26, 2009 in (X)HTML, Accessibility

Comments

  1. I’ve gone over this in my head a lot. I try to think of my basic markup (before figuring out style) as writing a paper. Awhile back, I ascribed to the only one first level heading per page, which should be the name of the site. Then I started wondering if that was the best method because the page isn’t really about the name of the site, period. It’s about something a bit more specific, like “Contact Us.”

    So, I now tend to think of the title element in the head as I used to think of an h1. The title corresponds to the big, centered text I would use as the title of my paper, rather than using an h1 to mean that. Instead, an h1 corresponds to a major section of the page in the same way a large, left aligned heading may point out “Abstract” or “Works Cited” or “Bibliography” on a paper.

    So, now, I may have an h1 on the name / logo, an h1 as the heading above an article, and an off-screen h1 as the heading for the footer. These would correspond to, perhaps, the roman numeral, top level points on an outline of the page.

    So, I pretty much use your example for option 2. I think having an only-one-first-level-heading is as viable as having many first level headings. My goal was to not make the title a redundant invisible first level heading element when it’s semantics are a bit stronger than that.

  2. The problem I run into with heading architecture is that most pages have two different hierarchies: the information architecture (the site framework) and the content architecture. I tend to favor not using headings for the information architecture because of search-optimization.

    Search engines use heading to figure out what a page is “about” and, unless you’re on the site’s homepage, the most important thing about the page isn’t the logo, so why wrap it with an h1 element? I would be worried that using heading elements for site architecture would dilute the page’s search-optimization.

  3. I’ve wondered about this a lot as well, especially the question “Should the name of the site, (or company name, or logo), be the H1, or should the title of the content on that page be the H1?”

    As you can see, I believe there should only be 1 H1. I think that there should be only 1 major subject on each page.

    The solution I have come up with, I believe, is to use an H2 at the beginning of the page for the site name and to use an H1 lower down as the content title. My feeling is that the actual content being dealt with on the page is more important than who owns the page, so the H1 should be the content’s heading. I don’t have a problem with putting the H2 above the H1 because newspapers do it fairly often, and magazines even more often, (in my opinion).

  4. I usually mark-up the logo or name of the site as h1, then mark up the title of that particular page as h2. With that said, either of the options in your article is fine.

    However, I do somehow have a problem with not marking up the logo as h1. I know some people will mark it up as h1 on the home page and then not mark it up as h1 on the other pages, suggesting that they think of the site as a book. The problem is, you could be coming to any random page of the site and as such it doesn’t make sense that only the first page would have the logo within an h1.

    Ultimately, I feel like a branding / logo / page title should have its own tag, which would signify it as such. Having two h1s creates two sections within the document, one section is nested under the logo, the other section is nested under the page title. It’s a little weird, but not terrible.

    I recommend reading the section on creating outlines of documents which is available in the HTML 5 spec. It’s actually pretty interesting.

  5. When laying out a document structure, you would want your logo/branding to be you H1, in my opinion. Here’s why.

    If you were looking at a plain document, it would appear as something like “Your branding”, “Document Title”.

    You’re basically identifying who you are first, which is important, then you’re identifying what you’re talking about.

    So in my mind, it would be best to use option #2. H1 tag for your site’s branding, H2 for sections of the document. Then nest down further with your header tags.

  6. I always markup my logo as H1, just because I try to keep images out as much as possible, but that doesn’t make it the “right” way. I agree with Anatoli that there should be some tag specific to the brand of the site separate from the H1.

    I am, as I am sure all designers are patiently awaiting HTML 5. So many promises, hurry the hell up!!!

  7. I disagree that the logo should be marked up in a headline tag. It may be part of the masthead, but a logo is not a headline. The h1 should be the name of the page, such as “contact us” (and thus similar to the content of the ).

  8. I’m a fan of using the Document Outline in the W3C validator for thinking about this. eg: this site

    While this doesn’t help us with the answer as to whether or not we should have multiple h1s, it does make it very easy to get an overview of the markup of the page entirely divorced from presentational and contextual clues.

    Once you look at this way, then it does feel a little strange that “Sponsors” is a) contained “within” “Heading, heading hierarchy, and document outlines”, and b) as semantically important as “Requirements for a good document structure”.

    I’ve been veering towards only using h blocks for elements that are actually part of the actual article and that elements outside the article itself are generally tagged with something like <p class=”h2”>Sponsors</p>. That way things may look the same as they would with the heading tags, but the Document Outline is kept as clean as possible.

    1. I’ve pretty consistently done the h1 for the logo and having it be the first heading in the document and the “page” title as a h2.

    2. After reading your post I came the the #2 conclusion, markup the logo as an h1 and have it be the first instance of a heading in the document, and also markup the page’s main content title as a h1 also. I feel that this now makes the most sense for creating meaning in the document and it’s structure via the document’s headings. Also I can only imagine that it helps with SEO.

    3. I’m not too sure if there will be problems using multiple h1’s in the document, I know browsers won’t have a problem with it. I don’t think people will have a problem with it. I’m not sure what Google will do, but I can only imagine that Google will “like” the idea of the title element in the head and a h1 heading in the document containing the same (or at least a sub-set) content.

    4. As for screen readers; not sure what they would do, could have some possible side-effects.

  9. January 26, 2009 by Raanan Avidor

    I believe that there should be only one at the top of the page and its context should be the title of the page and as close as can be to the of the page (minus company name / breadcrumb?).

    I find that putting the logo of the site inside an is problematic since it will not contain information specific to the page at hand (except the homepage?).

    The semantic structure of a document is simple and should be followed whenever possible. But if for some reason I will have to break it I think that it is better to break it and not hide behind the logo and trick.

  10. I’m still struggling with this as well. I used to mark up the logo as h1, but don’t do that anymore, although I can still think of situations where this would be appropriate (e.g. a branding site that’s more about image than it is about info). Now I use the h1 for the main content header only.

    I also used to have headers (h2/3/4) for navigation headings, but as these are often not visible in the design I got in a discussion with an SEO colleague who advides me not to do that on a regular base as it can be interpreted as a form of search engine spam. Also, “main navigation” and “section navigation” are not what most pages are about ;)

    So now I mostly use <p><em>nav heading</em></p> as navigation header. People can argue that this is the similar to using <b> for headings, but for me the argument is that these ‘headings’ are not really part of the content. The section navigation is perhaps the exception to this, as it is more closely related to the content. For my current site I use the following code structure:

    • p/em: skip links
    • h1: main content header
      • h2: sub headings
        • h3/h4/etc.: sub sub headings…
      • h2: logo
        • p/em: main navigation
        • p/em: additional navigation, if any

    This way the main site navigation is more related to the entire site (logo) than it is to the content of the page, which is the case for most pages I guess.

    For more complex sites, this is often not possible though.

    BTW: nice to be able to respond to some of your articles again ;)

  11. January 26, 2009 by Anders

    This is something that’s been on my mind for quite some time as well. A while back I stopped marking the logo as an h1, I just can’t seem to find a reason for the logo being the most important piece of information on every single page of a website. And the logo is basically about identity, so it shold be inline content, not a decorational image.

    Regarding the order of headlines, I don’t believe there is one true answer here. Unless there is heavy impact on accessibility having an h2 come before an h1, I don’t see why one couldn’t.

    I also can’t see why there can’t be more than one top level heading. Never really thought of it this way before, but couldn’t the “content-primary” section be regarded as, sort of, a document of its own? I don’t see the “nav-sub” really be subordinate to the “content-primary”, in other words it could stand on its own. Suppose we also have a right column, such as the sponsors area on this website: the word “sponsors” is the main heading of that section which I think could make it qualify as an h1 of that section. This would surely take away a lot of the guessing game in picking a heading level that just “feels good” in the secondayr sections of a web page. With this approach, every section of a page is sort of a document on their own. However this isn’t something I practice myself, knowing too little about the accessibility and potential seo issues.

    Nice to see the comments function back on. Will be interesting to follow this thread!

  12. This really points out how outdated HTML is. The heading structures works great if you made your sites look like a word document, the way the creators of HTML intended it to be used. What we need is , , , , , , , and so on…

  13. There’s a lot of debate on this topic. The W3C and WCAG suggest that there should be one and only one h1, and that h1 should be used only for the title of the page. The reason behind this? Who knows. It’s possible it makes it easier on screen readers and other assistive devices, but I’m not sure a true defense has ever been put forth.

    So, if it’s valid and it’s only suggested that there be only one h1, let’s just have more than one and the W3C and WCAG be damned, right? Well, the problem is that search engines tend to take guidance from these and similar bodies when developing their algorithms. Google, for example, expects that there will only be one h1 and that it will be the page title or a short description of what the page is about. This is why Google gives more weight to the content in the h1 that most other parts of the page.

    And, that’s why it’s a problem. Because you only get one shot at the h1 for most search engines and you don’t want it to be the company name or whatever arbitrary name you came up with for your web site or blog. Rather you want Google and other search engines to give weight to that nice, keyword-rich page title.

    Based on this, wrapping the logo in an h1 is a bad idea, but it doesn’t really help with the main problem: how do we markup headings until we get to the h1? It may seem a little unhelpful, but the answer is to avoid putting anything that would need a heading before the content area. We know that Google and other search engines like content as close to the top of the document as possible, so this should be a goal anyhow.

    This is how I’ve come to markup my documents, as a result. Sometimes it makes my life really difficult, but I only use one h1 and I only use it for the main content heading.

  14. Roger, a lot of people would disagree with me on the one heading subject but here’s my take… regardless of it being perfectly valid. As we know valid doesn’t always mean right, right?

    Draw a diagram of nodes for your heading hierarchy. OK now isn’t that the first hierarchical tree that has two roots?

    I’m not talking DOM, just basically which heading is the top heading.

    Anyway, my second observation is simply that it always seems more of an excuse to put a H1 on a logo than it is an argument to support using multiple H1 elements. Although many would disagree. Is the argued reason for marking up a logo as a H1 heading simply to get the SEO return? If that were the case I’d suggest 99% of the effort go into writing meaningful headings that make sense and supporting that with relevant meaningful content.

    And, finally my other question. If by the spec 2 or more H1s are valid, and valid is our guide for what is right and makes sense, then wouldn’t it be just as valid to put 2 or more H1s on a page that didn’t even say the same thing? It just seems every time someone does discuss 2 H1s on a page that it comes back to the argument that it’s valid HTML. Which we know from accessibility experience doesn’t necessarily correlate. Valid is only part of the discussion.

    Just my 2 cents and no doubt most people disagree.

  15. Damn, forgot the section navigation:

    • p/em: skip links
    • h1: main content header
      • h2: sub headings
        • h3/h4/etc.: sub sub headings…
      • h2: section navigation (“section: name”)
      • h2: logo
        • p/em: main navigation
        • p/em: additional navigation, if any
  16. To help verify the importance of headings, over 75% of respondents to the WebAIM screen reader survey indicate they always or often navigate by headings.

    I don’t think there are definitive answers to your questions. I have seen a few instances where users navigate to the h1 to find out what the page is about, but if they encounter the site name or logo, they do not try to navigate to a second h1, but instead navigate to h2’s, thus entirely skipping the actual content heading of the page.

    Thus, I tend to use one h1 per page that is the main title or content heading for the page, even if this results in the h1 being preceded by lower level headings (which is typically the case). I usually mark up the logo/site name as an h2.

  17. I completely disagree with idea that the logo should be the H1. Think of it this way: Your logo is your site’s name not the title of the page’s content — just like when a speaker gives a presentation the main title is the presentation’s title and not their name.

  18. I agree with those who have said that logos shouldn’t be headings. On my bread-and-butter site ( http://www.uleth.ca/man/ ), I have the “logo” in a simple div tag.

    FWIW, I also put the menu at the end of the code (right before the footer), and use CSS to move it above the main content.

  19. January 26, 2009 by Roger Johansson (Author comment)

    Thanks for all the good comments so far – it’s an interesting discussion and I wasn’t expecting a clear-cut answer.

    Also, I just realised that a bunch of comments had been (incorrectly) marked as spam by Movable Type, so I published those as well. In case you were wondering why your comment didn’t show up right away :-).

  20. My practice has been to mark up the text of the logo as h1 and then replace that with an image in CSS. Then I give the page title an h2. This is consistent with the source order of my documents, but I do wonder sometimes if I’m emphasizing branding at the expense of content.

  21. I’m with those who say the logo/name is not automatically the first heading, maybe on a front page this is true but on sub pages not so much.

    1. I don’t understand why the is an enforced order. There should be a preferred order but to me it makes sense for the headings to define the importance of a heading whether they’re in a linear order or not.
    2. I wouldn’t have a problem marking up a document as option 1. I know it goes against what I’m advised but (for now) I don’t see the logic in this advice.
    3. Well in HTM5 isn’t it possible to have multiple headings in multiple ? I’m still not sure what to think of this and I stick to one h1 heading on each page because again it just makes sense to have one main point of reference above all others.
  22. I always mark up the title of the particular page with h1.

  23. I forgot to mention a couple more things…

    I see the page title tag as an H0 tag, from what I gather this has no bearing on screen readers but from a semantic point of view it is essentially the first heading.

    Thanks for posting the link to that accessibility video on headings, I have never seen anything like that and it is really making me think again about the way I structure documents. :)

  24. @ Jared Smith: Do you know whether those who navigate by headings did so without first looking for ”skip-links” first on the page? If not, then a ”Skip to main content” might aid them in finding where the ”real” h1 of the page is, instead of them mistaking the first h1 for the only one.

  25. I don’t think logos that appear on every page should be marked up as h1; they are like branding on a letterhead, which is always present but not the main focus of attention.

    For that reason I now markup my top left logos with an h3, that way when I turn off styles, they appear at the top identifying the brand, but not imposing beyond that.

  26. My coworker and I were discussing this topic last week, so glad to see your take on it, Roger.

    I agree with wade and do not mark up the logo with a heading tag. I use a p tag with an id of “logo” and reserve the h1 tag for the name of the page.

    Like Sander Aarts, I also do not use heading tags for navigation headers.

  27. Indeed, the core issue is how dated the original concept of the H# tags is. As stated many times, the problem is that the structure makes sense to describe a document, but not so much a site IA. For that matter, nor does it help in structuring navigation.

    As such, I no longer go with the site logo as the H1 and take the more (presumed/assumed) SEO approach of the page’s content ‘title’ being the h1.

    Depending on the complexity of the navigation, I may use H2s for organizing the navigation as well.

  28. January 26, 2009 by Jules

    Heading 1, in my opinion, should never be used more than once on a page. I see a lot of discussions on this topic but it seems that most of the people contributing to it are web designers not copywriters/editors.

    Although I too am neither a copywriter nor an editor and the closest I have gotten to being either is having had my wrist slapped many times during the process of publishing 5 books, I learned a lot from my editors. I believe that the title of the page, the text that describes the content of the page, should be marked up as Heading 1 and therefore, since a page cannot have two purposes, there can be only one Heading 1.

    If the site logo is H1, then every page has the same content for H1 which makes no sense. Sometimes, however, it is difficult to describe the home page of a site, especially an ecommerce site, and in that case, I would allow the site logo to be H1 but once you start getting into product category pages and product detail pages, the content of H1 becomes very easy to create.

  29. Dude, comments! :-)

    I think option two is mostly valid, since in my book, two H1 headings can co-exist. The most important for a company and its branding is its name, so naturally that is the heading of the page, while at the same time the page content title (About, Contact etc) is as important.

    I think mostly that the logo/company name and page title can complement each other, and just like any relationship, we don’t want one part to be stronger than the other, right? :-)

  30. I was going to post on my blog, as my comment was going to be excessively long, but after reading the new HTML 5 specification, I believe that there is a correct way, actually.

    I recommend everyone to read this section of the spec: http://dev.w3.org/html5/spec/Overview.html#distinguishing-site-wide-headings-from-page-headings

  31. The logo has little relation to the content itself. Making the logo h1 is like making the author’s name the title of every book he/she writes.

    I don’t think there is or should be a hard and fast rule behind there being only one h1 but in general I think there would only be one since it denotes the PRIMARY purpose of the document of which there should in most cases only be one.

    The trouble behind a marking a title as h1 when it appears below other content that should be marked as a header really underscores a flaw in the document and a need for the document to be reconsidered not the rules of code.

    If your title or main header doesn’t appear at the top of the page then then the logical flow and by extension the accessibility of the page has been compromised, probably for the sake of presentation. That, I think most of us would agree, doesn’t belong in the html but elsewhere.

  32. Nice article, Roger.

    I’ve been thinking about the same thing the last few days and finally came to a personal conclusion. I almost wrote an article about this, but you beat me to it.

    I agree with many of you: I don’t like the idea of the logo being an h1. 9 times out of 10 it’s not really what the page is about. The only exception to this might be the homepage (or maybe even an About Us page) where the logo / name of the company really could be said to be what that particular page is about.

    That said, in the past, I have used h1 for logos. But I don’t plan to anymore.

    I’ve finally decided to just use h1 for, as Robert commented, the title of the page. Whatever the page title can be condensed into is generally what I’ll place as the 1st heading on a page.

    Having other text / paragraphs appear before my 1st heading doesn’t bother me.

    As far as other headings appearing before the h1 (as in the 3 column W3C example), why not just place the info in the 1st column after the main content in the HTML and use CSS to position it visually. This would remove the issue.

    I certainly have tried different options over the years: h1 as the logo, using headings in completely inappropriate places (ugh), and etc. But having the 1st heading after the page title being an h3 always bugged/bugs me. Having 2 h1s on a page also makes me feel very uncomfortable for some reason… LOL.

  33. January 27, 2009 by Hrvoje

    I started to use the site logo and contact details in a microformated hCard div and the H1 is reserved for the main page/article title. So the visitor has a downloadable contact info with logo included and the search spiders have a nice document outline.

  34. I wondered about this for some time until I started working on SEO projects with search agencies Tamar and BigMouth Media. From an SEO point of view, Google (and others too but I’ll just focus on Google for now as it’s the main player) is very interested in the semantic structure of your page.

    When the searchbot arrives on your page and begins indexing the content, one of the key ‘decisions’ it has to make is which sections of the page should are the most important. To do this, it inspects your markup, so the content of your H1 will be seen as the defining description of your page.

    For example if you’re page is intended to attract visitors in search of a specific product - let’s say a Nintendo Wii - your key search words and phrases should be present in your H1 tag. (There are plenty of other tips for writing content and structuring it correctly but this is on of the most important and on-topic!). Your other headings are important too so a well-structured document is imperative, but from an SEO point-of-view, only one H1 element is recommended.

    Now consider the alternative approach of labelling your logo as the H1. Google will spider your site and see a whole bunch of pages that are effectively saying ‘This site is about Company Name’ and as your page headline. Content elsewhere in the page will of course be indexed but you are more likely to have dropped further down the search results page by not optimising your content.

    So, in summary? Balancing semantics, accessibility, design and SEO is a constant battle and inevitably compromise is required somewhere or other. However in my view, the only H1 in the page should be the page title and this should be the first heading element in the page (ie H2, H3 etc should not appear before the H1). Logos can either simply be an img element, or wrapped in a paragraph or div if you really need some markup for your layout.

  35. Basically I would go with this structure.

    On the front page:

    • h1 - logo/page title
    • h2 - section names in sidebars, etc.
    • h2 - titles in items of sub-sections … etc.

    On inner pages:

    • h1 - content title
    • h2-h6 - subtitles in content
    • h2 - section names in sidebars, etc.
    • em - logo/page title

    There seems to be no perfect solution, but this is as close as I could get to what I consider to be a good tradeoff between w3c recommendations, accessibility and ol’ good sense.

  36. January 27, 2009 by Jared

    Roger - are there any plans for a element in HTML 5?

  37. January 27, 2009 by Jared

    I’ll try that again….

    Roger - are there any plans for a ‘logo’ element in HTML 5?

  38. I think the problems arise from the fact that a homepage is not a document (in a classical linear sense anyways).

    Therefore I normally suggest that elements that are not included in the page’s main content (the stuff you came to read) get a h1, for instance the main navigation (the heading could be hidden). Related (to the main content) navigation would on the other hand get a h2.

    It makes sense to me at least having more than one hierarchical structure on a homepage. ‘Cause that is what it looks like typical, having more than one column.

  39. I will agree with allowing two h1 headings. The HTML speck introduces a lot of new tags, which, used properly, will divide the document to sections that allow for their own main headings. As of the current state of HTML, I see using h1 for the site branding applicable for corporate websites, where this is the most important part of the page. But for blogs, or other content-oriented sites I would use h1 for the main content title. The problem with the h1 not being the first heading can be avoided with placing the main content block before the sidebars in the document.

    Not every web page structure can be described as a single tree (unles you select the branding as the root). Often the content in the sidebar has nothing to do with the main content of the page. When we thing of the document as a single tree, we imagine a news article, or scientific paper (that is what the web was made for, right?). But even newspaper articles has supheader sometimes (I’m not sure what’s the word in English, but that is what is used in Bulgarian). How should we markup one of these? A <p class=”supheader”> would do the job?

  40. It’s been really interesting reading other professionals’ thoughts on this - these are often the internal dialogues I run through my head when thinking about this topic.

    Generally, I tend to use an h1 as the page title for previously mentioned ABY and SEO reasons; a company name is not a descriptive heading. Even large corporate sites don’t usually justify having their logo in an h1 if they have a high profile.

    For me, logos are either a CSS image replaced link, or a link with an img element and so, I would go for option 1. It’s not ideal but it’s a compromise that I feel is acceptable.

    Personally, I try and keep my HTML flexible and not fix my mind on a rigid preference ( it’s hard breaking habits :S ) and code as the circumstance requires.

  41. The way I see it is any h2 is a sub-heading to an h1. Therefore wrapping the title of this article in an h1 for example would make “Sponsors” a sub-heading to the article’s title. Which it obviously isn’t.

    The only thing I can consider a super-heading to every other heading in the document is the name of the site, or the logo. Everything else should be an h2 unless of course it’s a sub-heading to one of the h2s in which case it should be an h3 and so on.

    I’ve written this down in more detail in using a locigal document outline.

  42. Headings suggest hierarchy. I use them for content (central part of the page), not for sidebars, menues, header&footer etc, which should be seen not as necessary related to the content (and structured as listings, ads boxes or something similar).

  43. Ideally, each page should have:

    • A main heading of this page (i.e. an H1).
    • Sub headings.

    For a screen reader, search engine bot or other ‘linear’ browser (e.g. an old mobile), having one H1 it makes it completely clear what page you are on. That main heading should match the title of the page as well (although can have more information after the page-specific words).

    The homepage is an exceptional case, because it represents the site, therefore having the logo as an H1 makes sense, the other headings on that page can be H2 or less.

    The other main factor is consistency of layout, both visually and in code order. It is vital to keep a consistent order. Moving the logo around could be quite confusing, and although you could argue that changing the logo from H1 on the homepage to a non-heading on other pages is confusing, that’s caused the least confusion in usability testing that I’ve witnessed/conducted.

    If for layout/CSS reasons you can’t have the content first in the source order, then having one H1 also helps to identify where the main content area starts.

    What we’re trying to get around in many cases is the lack of WAI-ARIA landmarks / HTML5 markup, which explicitly identify areas of the page. You can argue that the headings used for this purpose are as important as the page content, but I find that users tend to be there for the content, not the page layout.

  44. January 27, 2009 by Andreas Lanjerud

    For all reasons I can think of, especially indexing, search engine opts and whatnots, the title of the page should be the h1. Then sub-titles h2, h3 and so on.

    The company logo/name is not a header. Also, if it was, it should be a background image no? The logo is just an element, it’s not important for the document structure. If anyhting, it’s part of the address or “sender”.

  45. January 27, 2009 by Roger Johansson (Author comment)

    Thanks for posting your thoughts, everyone! So far finding consensus on this issue seems unlikely, as I suspected. About the only thing I think most of us can agree on is that the document’s title should be an h1. Most of us also seem to think that the logo doesn’t belong in a heading.

    Jared:

    To help verify the importance of headings, over 75% of respondents to the WebAIM screen reader survey indicate they always or often navigate by headings.

    That stresses the importance of headings for screen reader users.

    I have seen a few instances where users navigate to the h1 to find out what the page is about, but if they encounter the site name or logo, they do not try to navigate to a second h1, but instead navigate to h2’s, thus entirely skipping the actual content heading of the page.

    That’s an interesting observation, and a pretty strong argument against using an h1 before the main content heading.

    Like Martin says it would be interesting to know whether people who navigate by headings tend to use skip links or not.

    Jared (#38):

    Roger - are there any plans for a ‘logo’ element in HTML 5?

    Not that I know of. There is a header element though.

    AlastairC:

    What we’re trying to get around in many cases is the lack of WAI-ARIA landmarks / HTML5 markup, which explicitly identify areas of the page. You can argue that the headings used for this purpose are as important as the page content, but I find that users tend to be there for the content, not the page layout.

    So would you say that using headings to identify areas of the page such as navigation and other parts that are outside of the main content area is actually not that important to screen reader users?

    I guess once browsers and assistive technology support ARIA landmark roles all this will be much easier :-).

  46. My current setup where possible is…

    1. Only one h1 per page - it should reflect the one overal topic of the page
    2. On the site homepage the site title is the h1
    3. On a section/index page the site title becomes a strong, and the section name is h1
    4. On a content page the post/article title is h1 and the site and section title are both strong.

    That way there should only be only one page per site with a particular h1. Together with a complementary title scheme you should end up with a fairly natural site heirarchy and avoid multiple pages all using the same h1 contents (which to my mind is misleading).

    When that system isn’t available you generally just have to live with the site title in h1, page title in h2 and heirarchy goes from there.

  47. I agree that only one h1 per page should be used. Personally, I have not found any reason to use more than one. Though, some sites use multiple h1s for every section.

    During past agency work, I experimented with (1) using h1 exclusively for the logo/branding element on each page; and, (2) using h1 for home page logo/branding but P for all remaining pages with the h1 used for page title. Months later, I compared search rankings for each page: h1 for page title had a slightly better ranking.

    Search engines know the name of the site from the domain name; logo/branding is known by visitor regardless of the HTML element used. It seems a waste of a h1 to not use it for significant content.

    Nice site. ( ^|+)

  48. January 28, 2009 by Darren

    As a rule of thumb I like to structure as follows:

    title = page title - site title
    p class=”site-title” = site title
    h1 = page title
    h2 = sub title
    h1 = search
    h1 = navigation

    There is no need IMHO to have the logo in a h1, and in this scenerio the first h1 is always the current page title, then use CSS to present this the way I like, usually taking advantage of absolute positioning.

    You can also use floats and negative margins to make sure your three column layout for instance always flows with the main column first so your content heading structures always make sense.

    I find the key is to forget the presentation in the first instance, structure the markup semantically and then use CSS to present it in the format you desire ;-)

  49. Sorry if someone already mentioned this, but there is a good reason why the site name and the main content both should be a <h1>: both of these appears in the page title.

    Ex: Headings, heading hierarchy, and document outlines | 456 Berea Street.

    Therefore, one shouldn’t be afraid to use two level 1 headers on a page.

  50. To continue the idea of thinking about a web page as a paper page I’d like to note that ususally a header of a paper page does not have prominence at all. The logo and company name on such a page can be dimmed, meaning that it’s only background information.

    So if we apply this to a web page we could markup the site/company name with simple <strong> or <em> element, thus giving some kind of prominence to the site name and reserving the <h1> for the real heading.

  51. Ben Buchanan (#47) has the best working solution IMO and one that I try to implement.

    We all know that HTML isn’t perfect but while we use this language, we are bound by it.

    By giving branding elements strong emphesis, the developer is highlighting the significance of the content, while ensuring that the heading structure references the content of the page and not the site.

    Marvin

    p.s. That said, this page alone is evidence how hard is to reach a consensus on this. In a recent project at an agency, we had a looong debate over headings, and had to comprimise on two h1’s; one for name of the website, one for the heading of the content :)

  52. Using 2 H1’s will fail (html 4.01 strict) validation I think. only one should ever be used on a page I think

    Using an image as the content of H1 is surely semantically incorrect and will do nothing for SEO. Using the company name in the H1 then replacing this with an image using CSS or even JS would surely be much better..?

    Good article though, thought provoking and interesting :)

  53. Title of document should contain whole level 1 heading, but may contain also other info. It may be useful to add some site-wide information to a title.

  54. I think your company name should not be in a h1. Is it that important to you our to your visitors? A h1 is meant for the page title only, I guess. And with a three column layout it it still possible to let the page title be the first heading. Extra markup is needed though.

    Look at this quick example: http://lab.webtrash.nl/. I think that’s the best solution. Hierarchy is correct and your content is as high as possible in your document structure. Good for screen readers and Google too.

  55. I believe in using only one h1 per page. I feel that way because, to me, offering two is illogical, and might be confusing as well. Moreover, it’s a bit old fashioned: in the 1800s and early 1900s books were sometimes given a title and an alternate title — not to be confused with a subtitle (ie “Bruin” or “The Grand Bear Hunt”, sorry, no additional info). I thought that was kind of silly, but it was/(still is?) required on a copyright

    I think — especially because of the usage limit — that it should be the first heading on the the page. Preferably above the fold. Using it for the logo… I’m fine with that, though I think something should be added (i.e. Home, About, Contact, Article), or it should be pretty quickly followed by an h2 to give users more usable info about what comes next.

    I don’t find that the h1 is very important in terms of SEO (the title element rules), therefore I look at the h1 in respect to usability, accessibility, and semantics. And what, to me, is logical.

    I know this may not exactly answer your specific questions, but it pretty much sums up my feelings about using the h1 element.

    Nice article, Roger.

  56. Hearing folks discuss how they tackle things has been great and somewhat changed how I might approach both semantically outlining a page’s content as well as its navigation and overall structure in the future.

    After reading through, I tend to think similarly to Marvin (#52) and Ben (#47). Not using a heading, but rather a strong emphasis on more navigational or branding sections/elements makes sense to me and leaves a clear understanding of semantic headings used for the page’s content.

    This works in a pretty self-explanatory way for a site’s internal pages, but means that the homepage is an exception where I usually wrap the organization’s name/title in an ‘h1’ element, which I’m fine with and usually can easily implement using a class naming system on the ‘body’ element throughout the site.

    Some of the items (most noted previously in some way above) that generally cross my mind when trying to figure out how to lay out things semantically and contextually within a document are:

    • SEO
    • Accessibility (aiding with navigation throughout the document and an understanding of content in document for screen readers)
    • Consistency of navigation and context throughout a site (giving a user a cognitive roadmap to your document with things like site/organization title, skip navigation, section labels)
    • Consistency of the content’s outline throughout a site (where I usually switch to the “book/newspaper” way of thinking when using semantic headings for the main content of document)

    On another note, I’m wondering if folks have different semantic conventions for a more interaction-heavy site (such as web application) versus a more traditional one-way informational site (such as an encyclopedia or promotional/marketing site). Do you change any of your strategy? If so, why?

  57. I’m not 100% sold that Google places the most weight on h1. They place the most weight on a clear organization that strongly supports an idea or group of ideas. (and I specifically mean Google since others don’t seem to work like this)

    If you force a structure to fit an h1 having the main point on an internal page, and the organization structure is different on other pages, like home or category or archive pages, I think Google will get a little frustrated. If all the h2s support the h1, if all the h3s support the h2s and so on, Google will love the page, regardless if the key point begins on the h1 or h2.

    I don’t have anything concrete to prove that right now, but I tend to lean towards h1 always being the site name followed by h2 being the point(s) of the page. That way you can retain the same organizational structure throughout your website.

    It also makes upkeep, organization, and hand-offs to other groups a lot simpler to explain.

  58. This is something that I have been turning over in my head of late, as many of you have. For the most part although part of a whole site, an individual page stands by itself. Semantically then, you would expect that the h1 tag being the top level heading on a page would describe that page. The logo/company name is not in this case the top level for the page but more like the top level for the site. As I see it, each page is akin to the chapters of a book and as such there is a single top level heading for each page. So, I find myself falling fairly firmly on the side of a single h1 tag per page which describes the content of the page “Contact Us”, “Products & Services” or “About Us” for example. To me this seems to be the most logical way of marking up a site.

  59. I agree with the book-like methodology, where the site is infact treated like a book.

    From the front, you see the main heading which is the book’s title, followed by the author (ie. the site/company name).

    The front page of a web site usually doesn’t have a better heading to offer other than the site/company name with regards to SEO (ie. ‘home’, ‘welcome’, ‘about us’ and ‘latest news’ are no good).

    If you flick open to page 55, you don’t want to see the book’s title as the main heading again, or the author’s name for that matter (although these may appear in the header of that page, you know, the bit that repeats on every page outside the top margin).

    You would rather first be reading the heading most relevant to the context of the content on that page. This might be a chapter name, or a sub heading within, depending on how luckily you placed your thumb.

    I thought the whole idea behind semantic’s was to separate content from design in the first place. As far as I am concerned, your site/company name up there in the header on page 55 is not part of the content, so it must be part of the design.

    In a book, every page is wrapped with this basic type of information “you are on page 55, this book is called 456bereastreet”. This text appears outside of the content area in small text, not size 20 Times New Roman, or size 18, 16, or 14 for that matter.

    You might argue that it is better for SEO.. but who’s SEO are you talking about; your site/company’s or your content’s? If someone lands on a page in the middle of your site without first visiting the home page, chances are they came straight from Google anyway.

    If they typed in your site name, they would have landed on your home page right?

    That’s my take. :)

  60. January 29, 2009 by Roger Johansson (Author comment)

    Thanks again for your input everybody.

    I’m not sure if it will help me come to a conclusion on this subject, but at least a couple of things I hadn’t quite considered have been brought up.

    I doubt anyone will come around and post the perfect solution, so I’m closing comments on this one now.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.