Headings
- Kim Collins (Unlicensed)
- David Fourney (Unlicensed)
Headings have a purpose beyond their visual design as large bold text. They provide detailed information about a document's structure that can help users quickly understand the content of the page.
Users of assistive technologies, such as screen readers, rely on headings to easily navigate content. For this reason, headings need to be not just visually apparent, but programmatically apparent too.
What is (or is not) a Heading?
Often a page has text that is visually styled in a way that visual users might understand them to be some sort of section title. Big bold text may look like a heading to visual users, but these are not headings. Screen readers will ignore the size and font-weight of the text.
This means the semantics of this visual design is not conveyed to non-visual users unless it is marked up in the HTML code as such. If obvious section titles are not encoded as headings, they are not headings.
In HTML5, headings are denoted with the <h1> to <h6> element tags. <h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6>
Heading hierarchy
Best Practice
Use only one top level heading (<h1>) with no other headings before this high level heading.
Avoid skipping heading levels. Always start from <h1>, next use <h2> and so on. When headings are nested, heading levels may be "skipped" when closing a subsection.
When headings are not nested correctly, an incorrect content hierarchy can be implied. This can be an issue for users of assistive technologies, especially non-visual users.
The preferred hierarchy is to use a single level <h1> at the top of the page. All sections are then tagged <h2>.
<h1>Example top level heading 1</h1>
<p>This is some text.</p>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<h3>This heading 3 marks a subsection</h3>
<h3>Another heading 3</h3>
<h2>This heading 2 closes the previous section and starts a new topic</h2>
<p>and so on...</p>
When to use headings
Use headings to break up text and help users understand where to look for specific information in the content. Keep headings brief, clear, informative, and unique.
While you can repeat headings over multiple web pages, each heading should be unique within the same web page.
Sections that users are likely to want to navigate to (like search results) should have headings.
Do NOT use lower heading levels to decrease heading font size. Use the CSS font-size property for this.
How do users navigate headings?
Just as a visual user can scan a page's headings to quickly understand its content at a glance, screen reader users can also quickly navigate a page by its headings.
Screen readers provide keyboard shortcut keys that go from heading to heading, similar to how the TAB key goes from link to link. For example:
- using the 'H' key, a JAWS user can jump from one heading to the next all the way through the hierarchy of the page.
- using the number keys 1 through 6, a JAWS user can move through headings at specific levels. This can make it easy to quickly find specific parts of the page or subsections of content.
- JAWS can present a listing of all headings on a page in a summary window.
Heading information can also be used by user agents, such as web browsers, to automatically build a table of contents for a document.
Resources
Writing good headings: