HTML Heading Tags - <h1> to <h6>

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are used to define HTML headings. The headings are ranked in order of importance or rank.

Example

<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

Usage

  • The heading (usually <h1>) represents the heading for that explicit section.
  • Headings of equal or higher rank start new subsections that are part of the previous parent section.
  • Headings of lower rank start new subsections.
  • Headings may be nested in order to reflect the organization of the page. Most screen readers generate an ordered list of headings on a page making it easier for them to understand and navigate the content. An example of nested headings:
    <h1>H1 Heading</h1>
      <h2>H2 Heading</h2>
        <h3>H3 Heading</h3>
      <h2>H2 Heading</h2>
        <h3>H3 Heading</h3>
          <h4>H4 Heading</h4>

Attributes

The H1 to H6 element only supports the Global Attributes.

Best Practices

  • It is best practice to only include one <h1> heading per page, but Google’s John Mueller has confirmed that you can use as many as you want:

    That being said, users using screen readers may expect there to be only one <h1> tag and including more than one might be confusing.

  • You should not skip heading levels as it may confuse users using screen readers. For example:

    • This is not good practice:
      <h1>Heading 1</h1>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
    • This is good practice:
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
  • For SEO purposes, you may want to use lower importance <h4>, <h5>, or <h6> tags in your footers or sidebars. That being said, Google does use <h3> tags for their footer headings on web.dev.

    This is likely because Google understands semantic HTML, namely that the <footer> element is in a different content sectioning element to the main content, and as such doesn’t belong to the main flow.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes