Correct use of HTML headings on a homepage

There’s been quite a lot of debate about the correct use of HTML headings (H1, H2, H3, etc) to define a document structure. WCAG 2.0 says that we should create a correctly nested structure of headings, not least to help users with screen readers browse through content on a page. Conventional standards-aware wisdom says that each page should have a single H1, followed by H2s, H3s, etc. This is fine for a web page that is structured like a Word document – we have an overall heading, and then sub-headings. But what about a homepage that consists of some branding, navigation, and then a grid of ‘teasers’ for deeper content on the site? This is a different kind of page structure, and arguably not one that HTML was designed for, so there’s going to be some compromise.

  1. There’s a good case for saying that on the hompage (only) the logo or name of the site should be marked up as H1. I don’t think this should be applied as a general rule on other ‘content pages’ because this is a waste of the H1 function both for screen readers and for search engine ranking. But we could make an exception for the homepage. It sort of makes sense. But then you have a slightly fussy situation where the HTML and CSS for your logo is different for the homepage than for all other pages.
  2. Another alternative would be to allow multiple H1s on the page and markup all the teaser headings as H1. This feels instinctively wrong to me, because I think an H1 should define the overall, main content for a page. It probably also dilutes the effectiveness of the headings in search engines, and isn’t going to help screen readers if they’re expecting a single H1.
  3. Alternatively, we could choose to miss out the H1 tag for the homepage. This makes sense from the perspective of the information architecture for the site. Afterall, those teaser headings are H1s on the content pages they link to, but shouldn’t be H1s on the index page. In terms of screen readers: if an H1 is not found, presumably a decent screen reader will try jumping to H2. It may not be totally ‘correct’ but I doubt this is going to trip someone up in practice? On the other hand, you are wasting the power of that H1 for search engine ranking.
  4. I suppose a further option is to put in a ‘phantom H1′ and then hide it with CSS. But that also feels a bit messy.

So anyway, I’m leaning towards options 3 at the moment in cases where an H1 tag doesn’t really ‘make sense’.

3 thoughts on “Correct use of HTML headings on a homepage

  1. Google will look at the H1 tag to help indexing text content and give you an extra point for the matching words inside the H1. H1 tags are hard to make look nice on most good looking sites, so this debate on what to use always comes up. From an SEO perspective, H1 tags in conjunction with bolded words, good metadata and a reasonable frequency of the targeted phrase will help index your site.

    In theory, Google also looks at H2 and H3 tags, but I have seen little to nothing that Google ranks H1 tags more important than an H2 tag, but it is likely to make sense. On super competitive pages this might matter.

  2. I completely agree with number 3 in the case that the design doesn’t accomodate a useful .

    1) You don’t have to fiddle with inconsistencies in the mark-up
    2) You get to keep that precious h1 for accessibility and seo purposes
    3) Doing it in this way, will not affect the visual design of the site.

  3. Just read through 3 of your posts, originally found your site through a search for Youtube Channel Feeds for WordPress… very good and interesting posts.. will be coming back for more… love the jquery text resizer too.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>