<h1>–<h6>: The HTML Section Heading elements
<h6> HTML 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.|
Any element that accepts
flow content; don't use a heading element as a child of the
|Implicit ARIA role||heading|
|Permitted ARIA roles||
These elements only include the global attributes.
align attribute is obsolete; don't use it.
- Heading information can be used by user agents to construct a table of contents for a document automatically.
- Avoid using heading elements to resize text. Instead, use the CSS
- Avoid skipping heading levels: always start from
<h1>, followed by
<h2>and so on.
- Use only one
<h1>per page or view. It should concisely describe the overall purpose of the content.
Using more than one
<h1> is allowed by the HTML specification, but is not considered a best practice. Using only one
<h1> is beneficial for screenreader users.
The HTML specification includes the concept of an outline formed by the use of
If this were implemented it would enable the use of multiple
<h1> elements, giving user agents—including screen readers—a way to understand that an
<h1> nested inside a defined section is a subheading. This functionality has never been implemented; therefore it is important to use your headings to describe the outline of your document.
The following articles give more information about the status of outlines:
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:
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:
A common navigation technique for users of screen reading software is jumping from 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.
<h1>Heading level 1</h1> <h3>Heading level 3</h3> <h4>Heading level 4</h4>
<h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3>
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:
h2Distribution and Diversity
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
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
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.
<header> <nav aria-labelledby="primary-navigation"> <h2 id="primary-navigation">Primary navigation</h2> <!-- navigation items --> </nav> </header> <!-- page content --> <footer> <nav aria-labelledby="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.
|HTML Standard |
BCD tables only load in the browser