The HTML <h1>
–<h6>
elements represent six levels of section headings. <h1>
is the highest section level and <h6>
is the lowest.
Content categories | Flow content, heading content, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts flow content; don't use as a child of <hgroup> element, it is now deprecated |
Permitted ARIA roles | tab , presentation |
DOM interface | HTMLHeadingElement |
Attributes
These elements include the global attributes.
The align
attribute is obsolete; don't use it.
Usage notes
- Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
- Do not use lower levels to decrease heading font size: use the CSS
font-size
property instead. - Avoid skipping heading levels: always start from
<h1>
, next use<h2>
and so on. - You should consider avoiding using <h1> more than once on a page. See Defining sections in Using HTML sections and outlines for more information.
Examples
All headings
The following code shows all the heading levels, in use.
<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>
Here is the result of this code:
Example page
The following code shows a few headings with some content under them.
<h1>Heading elements</h1> <h2>Summary</h2> <p>Some text here...</p> <h2>Examples</h2> <h3>Example 1</h3> <p>Some text here...</p> <h3>Example 2</h3> <p>Some text here...</p> <h2>See also</h2> <p>Some text here...</p>
Here is the result of this code:
Accessibility concerns
Navigation
A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
Don't
<h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4>
Do
<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3>
Nesting
Headings may be nested as subsections to reflect the organization of the content of the page. Most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content:
h1
Beetlesh2
Etymologyh2
Distribution and Diversityh2
Evolutionh3
Late Paleozoich3
Jurassich3
Cretaceoush3
Cenozoic
h2
External Morphologyh3
Headh4
Mouthparts
h3
Thoraxh4
Prothoraxh4
Pterothorax
h3
Legsh3
Wingsh3
Abdomen
When headings are nested, heading levels may be "skipped" when closing a subsection.
- Headings • Page Structure • WAI Web Accessibility Tutorials
- MDN Understanding WCAG, Guideline 1.3 explanations
- Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
- MDN Understanding WCAG, Guideline 2.4 explanations
- Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
- Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
Labeling section content
Another common navigation technique for users of screen reading software is to generate a list of sectioning content and use it to determine the page's layout.
Sectioning content can be labeled using a combination of the aria-labelledby
and id attributes, with the label concisely describing the purpose of the section. This technique is useful for situations where there is more than one sectioning element on the same page.
Example
<header> <nav aria-labeledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labeledby="footer-navigation"> <h2 id="footer-navigation">Footer navigation</h2> <!-- navigation items --> </nav> </footer>
In this example, screen reading technology would announce that there are two nav
sections, one called "Primary navigation" and one called "Footer navigation". If labels were not provided, the person using screen reading software may have to investigate each nav
element's contents to determine their purpose.
- Using the aria-labelledby attribute
- Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification. |
Living Standard | |
HTML5 The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification. |
Recommendation |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | Yes | 1 | Yes | Yes | Yes |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |