Headings are a way of structuring your content. They make it easier for people to read, and help them scan the page quickly. Headings are not only key to good Search Engine Optimisation (SEO), they are essential for accessibility.
People with disabilities who use Assisted Technologies (AT) such as screen readers typically use headings to navigate your web page. In a similar way to how people with good vision will quickly scan through your text to comprehend the gist of the article or to find the section that they are interested in reading.
A good heading structure will help people using AT avoid having to read your whole page, line by line. Instead, they can use the headings to jump to the section they want to read.
One of the quickest and easiest wins you can do to make your web page more accessible and inclusive is to get your heading structure correct. If you do nothing else for accessibility, get your headings right.
Headings are important. They are the first step most screen reader users take when they begin to navigate your web page. 65.5% of users will start by navigating headings.
~ Joe Dolson, Headings Hierarchy Problem
Rian agrees with Joe. Headings are crucial:
For my work I build sites for blind people. They use a braille line and screen reader to read and navigate a website. During the development of those websites I learned that blind people read a web page differently than I do.
Blind web users read a page linearly and depend on headings and links to navigate.
This changed the way I build site dramatically, I changed from visual coding to story telling coding.
~ Rian Rietveld Storytelling in HTML: practical accessibility
What is a heading?
HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least.
~ W3C, Headings
A simple example
In the following example we have one H1 tag, then use H2 and H3 tags to break up the content in a meaningful way. If you turned off the stylesheet, the content will still make sense.
HTML5 Heading Hierarchy
Prior to HTML5, although not mandatory, it was generally accepted that each web page should have only one H1 element. This concept was turned upside down with the introduction of HTML5:
In HTML5, each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of what heading level you should be using—you can just start from H1 each time.
~ Jeremy Keith. HTML5 for Web Designers
But hold your horses, it seems this HTML5 H1 love-fest has one major stumbling block:
The HTML5 Document Outline is a concept that lives in the HTML specification, but is essentially a fiction in the real world. It is a fiction because user agents have not implemented it and there is no indication that any will.
~ Steve Faulkner, The HTML5 Document Outline
The W3C have even issued a warning and advise authors to use heading rank to communicate the document structure instead of the outline algorithm:
Warning! There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.
~ HTML5 Outlines Specification
So, for the rest of this article, I going to proceed using ‘old faithful’; one H1 per page.
Headings and the search engines
Headings have always been a useful tool in SEO. They are not just people friendly, machines love them as do the WordPress SEO gurus at Yoast:
On a category page that H1 would be the category name and on a product page the product name. It’s not that hard, indeed. That is why we still recommend using the H1 this way.
~ Michiel Heijmans Headings and why you should use them
Matt Cutts from Google suggests a single H1 tag is the way to go for SEO too:
I like one.
~ Matt Cutts How many H1 tags should be on each web page?(video)
How to check heading structure
Depending on the structure of your CMS or WordPress theme including any plugins used, your website might be structured to have multiple H1s. So it is wise to check your existing structure before you proceed any further.
One way to check is to view source. An even easier way is to turn off stylesheets; does the content still make sense?
There are some tools that can help you determine your page structure. They can also be used to check your headings hierarchy when you are authoring too.
The most important thing is that you move from H1 to H2 to H3. Do not jump from H2 to H4 for example. Though you can move from H3 to H2, as you introduce a new sub-heading.
Don’t choose a heading for its ‘looks’
One common issue is that authors will use the wrong heading tag just because it looks better. Remember, headings are semantic, they mean something. If you want the heading to look different, use CSS to style it. Don’t use a heading just because it looks right.
Use descriptive headings
Descriptive headings help users find specific content and orient themselves within the Web page. Authors may also want to consider putting the most important information at the beginning of each heading. This helps users “skim” the headings to locate the specific content they need, and is especially helpful when browsers or assistive technology allow navigation from heading to heading.
~ W3C, Providing descriptive headings
Good headings not only help the search engines and people with disabilities, they help even those blessed with 20/20 vision enjoy your content.
How Users Read on the Web
Summary: They don’t. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.
~ Jakob Nielson, How Users Read on the Web
- Headings in HTML 5 and accessibility – Bruce Lawson
- Semantic Structure – WebAIM
- Heading Structure – Semantics and Accessibility
- How to write accessible web content – KnowHow Non Profit
- HTML5 Headings in WordPress: A11y versus SEO? – Rian Rietveld
- Guide to semantic HTML – Joe Dolson
Take the time to structure your content using headings. Use them wisely and everyone will benefit. This will improve your accessibility, readability and make your content a big hit with the search engines. Headings are your best friend.