Headings
Headings
Introduction
Use HTML headings<h1>
,<h2>
,<h3>
,<h4>
,<h5>
and<h6>
properly.
Headings are hierarchical:<h1>
is the most important, then<h2>
, through to<h6>
being the least important. Use one<h1>
per page.
Headings at the same level or higher start a new section, whilst headings at a lower level start a subsection. Don't skip heading levels.
If the styling of a heading doesn't look right visually, for example too big or bold, style it with CSS but always use the correct semantic heading.
The text for a heading should be descriptive, meaningful and unique on the page.
When it goes wrong
When semantic HTML elements for headings aren't used, the page has no structure or definition available to assistive technologies.
Headings provide navigation landmarks, which assistive technologies can navigate over to find the area they want on the page.
Screen readers can navigate and jump to a heading, in the same way as a sighted user would scan for the heading they need.