Web/HTML/Element/Heading Elements

The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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 a heading element as a child of the `<hgroup>` element — it is now deprecated.
Implicit ARIA role	heading
Permitted ARIA roles	`tab`, `presentation` or `none`
DOM interface	`HTMLHeadingElement`

Attributes

These elements only include the global attributes.

The align attribute is obsolete; don't use it.

Usage notes

Heading information can be used by user agents to construct a table of contents for a document automatically.
Avoid using heading tags to resize text. Instead, use the CSS font-size property.
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> will not result in an error, but is not considered a best practice. It is beneficial for screenreader users, and SEO.
While HTML5 allows a <h1> per sectioning element, it is not considered best practice, and may subvert the expectations of how screen reader users navigate.

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 Beetles
1. h2 Etymology
2. h2 Distribution and Diversity
3. h2 Evolution
  1. h3 Late Paleozoic
  2. h3 Jurassic
  3. h3 Cretaceous
  4. h3 Cenozoic
4. h2 External Morphology
  1. h3 Head
    1. h4 Mouthparts
  2. h3 Thorax
    1. h4 Prothorax
    2. h4 Pterothorax
  3. h3 Legs
  4. h3 Wings
  5. h3 Abdomen

When headings are nested, heading levels may be "skipped" when closing a subsection.

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-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.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.	Living Standard
HTML5The definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.	Recommendation
HTML 4.01 SpecificationThe definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.	Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`h1`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support