On the proper use of h1 headings

James Turner, 06 October 2015

Tags: HTML

You can learn all sorts of interesting things by checking a website using W3C's markup validator tool, as I discovered recently when I zapped Responsive Web Design with it. What did I find? Nothing. Yep. Congratulations to the designers; they crossed all their is and dotted all their ts.

Well, there was one thing. The validator returned an amber warning about using two <h1> elements in a single page: “Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).” This got me wondering—am I using h1 elements correctly? How many should there be on a single page? What happens if there are more than one? Oof!

Headings, web standards and your dog

Looking further into it, it seems that RWD does something that I also tend to do with my sites, including this one. We both put the site logo (the big, bold text at the top that says ‘Responsive Web Design’, which interestingly is a SVG file, not raw text) and the page heading (for example, ‘In-house responsive workshops’ on the eponymous page) into a h1 element. I'm curious to see what guidance there is on the correct use of h1 elements.

Now, where does a newbie web designer go to get authoritative information about best practices? With thousands of well-meaning blogs (hi, mum) and magazines out there, it can be difficult to decide which information is the most up-to-date or veracious. The more different viewpoints I read, the more I'm inclined to go back to the one source that's meant to have ‘the answer’: web standards.

W3C Recommendations

Although it was last modified back in 2006, W3C Q&A Tips: Use <h1> for top level heading says it quite clearly: ‘If [the page] is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets”.

If [the page] is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write <h1>Dogs</h1> while the title should work in any context: Dogs - Your Guide to Pets

A logo is an image

So, the standard is that the h1 element is for the page, not site, heading and should not be used for the site logo. Harry Roberts' article, Your logo is an image not a h1 from 2010, elaborates on this. He suggests that in terms of content, a logo is better seen as an image, just like any that you might see in the main content of an article. Its function is to serve as a ‘photo of the site’, not as a line in the site's table of contents. I believe this is true even if the logo contains just text and no image, for example, the easyJet logo. This is perhaps why RWD's logo is contained in a SVG file.

Empty heading, anyone?

The Harry Roberts article also asks what we should do if a page has no natural heading, such as the index page. Although he suggests adding an empty h1 element, in fact his index page does have a h1: “Front-end Architecture and Performance Engineering”. It looks like he updated his site since that article was written. Perhaps a web designer should find a suitable h1 heading for every page on a site, even the structural/admin pages?

Conclusion: One heading to rule them all…

So, RWD, it looks like putting your site logo into a h1 element is just a little bit naughty. Once again, a simple-looking question has yielded quite a lot of useful information. To summarise:

• The h1 element is for the page, not site, heading.
• In a multi-page site, it's helpful to imagine the h1 element as the chapter heading in a table of contents.
• You shouldn't put your site or company logo into a h1 element. Instead, put it in an inline image (or paragraph, if your site has no logo).
• If your page doesn't have a natural heading, such as your index page, well, find one.

Further reading

W3C Recommendations

These are some pages which I consulted on W3C's Recommendations about headings:

• Heading and sections
• The h1, h2, h3, h4, h5, and h6 elements
• List of common idioms without dedicated elements. This discusses some examples of when not to use a h1 element, particularly focusing on subheadings and straplines.

Accessibility and SEO

Here are some other articles on the topic of headings in HTML:

• Accessible HTML headings is a great read. It considers best practices for headings from an accessibility point of view.
• There are plenty of sites that claim SEO expertise and discuss headings from a SEO perspective. One such is this: Use HTML headings. It was one of the few that didn't open an unwanted pop-up ad. What is it with SEO sites?