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