Definition and Usage

The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags represent headings and define six levels of heading hierarchy, from level 1 to level 6, within a webpage's structure.

These tags serve as important semantic indicators that help identify the hierarchy, topic, and content structure of an entire document (in the case of <h1>) or of individual sections and regions (in the case of <h2>~<h6>).

Features

  • These tags have six levels of headings, numbered from 1 to 6.
  • They indicate the hierarchical level of nested sections within a webpage.
  • The <h1> tag is used for top-level headings, representing the overall document.
  • The <h2> tag is one level below, and the <h3> tag is one level below <h2>.
  • This continues in the same manner down to the <h6> tag.

Basic Example

HTML Example of all heading tag levels 
<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>

These heading tags are used to represent the outline and hierarchical structure of a webpage or document.

HTML Example demonstrating outline and hierarchy in a webpage 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Heading Tags</title>
    </head>
    <body>
        <h1>Heading Tags</h1>
        <p>The h1, h2, h3, h4, h5, and h6 tags are used to indicate headings for different sections.</p>
        <p>They represent the headings within a webpage or document.</p>       
        <section>
            <h2>Using Heading Tags</h2>
            <p>These tags help define the outline and hierarchical structure of a webpage or document.</p>
            <h3>Benefits of Using Heading Tags</h3>
            <ul>
                <li>
                    Assigning headings to each section clarifies the structure of the document,
                    allowing users to quickly scan and identify relevant content areas.
                </li>
                <li>
                    Search engines analyze page headings to understand the topic of the content,
                    which helps improve search engine optimization (SEO).
                </li>
                <li>
                    They assist users with visual impairments or other disabilities
                    by conveying the structure of the webpage.
                </li>
            </ul>
            <h3>Best Practices When Using Heading Tags</h3>
            <p>Ensure the semantic structure of the content is clear and logical.</p>
        </section>
        <section>
            <h2>Heading Tags and Accessibility</h2>
            <p>.....</p>
            .....
        </section>
        .....
    </body>
</html>

Code Explanation
The <section> tag represents a general section in a document or application.
It denotes a group of content related to a specific topic. While a heading for the topic is not strictly required, it is generally used together with the section.

Usage Notes

  • Do not use heading tags solely for text size or boldness. Instead, use CSS properties such as font-size for text size and font-weight for boldness.
  • Avoid skipping levels in the hierarchical order. Heading levels should always reflect the logical structure. Always mark up headings sequentially: <h1> followed by <h2>, then <h3>, and so on. This ensures the content structure and outline are easy to understand.
  • You do not need to use all heading tags from <h1> to <h6> on every webpage. If the hierarchy is shallow, you may only use <h1>, or <h1>~<h2>, <h1>~<h3>, and so on, depending on the content structure.
HTML Avoid skipping heading levels in the hierarchy 
<h1>Heading Level 1</h1>
<h3>Heading Level 3</h3> <!-- Logically or structurally, an h2 is expected here -->
<h4>Heading Level 4</h4>

Avoid Using Multiple <h1> Tags on a Single Page

The <h1> tag represents the top-level heading of a webpage. It should be used for the main title or primary topic of the page. It is recommended to use only one <h1> per page, which improves accessibility for screen readers and helps with search engine optimization (SEO).

Assigning Heading Roles with the role Attribute

The role attribute is an extension concept in HTML that provides a clearer structure and meaning to HTML elements.

Using role="heading" allows an element to be identified as a heading. This approach is useful in situations where native heading tags cannot be used, and it provides information to assistive technologies such as screen readers for improved accessibility.

Consider the following example:

HTML 
<!-- Example using a native h3 heading -->
<h3>Heading Level 3</h3>
<p>Content for Heading Level 3</p>

The above code demonstrates a standard <h3> heading.

Next, the following example uses role="heading" to give heading semantics to a <div> tag that has no inherent heading meaning, and uses aria-level="3" to specify that it functions as a level 3 heading, equivalent to an <h3> tag.

HTML 
<!-- Example using role="heading" and aria-level -->
<div role="heading" aria-level="3">Heading Level 3</div>
<p>Content for Heading Level 3</p>

The aria-level attribute is used with elements that have role="heading", and its value ranges from 1 to 6, corresponding to the heading level. For example, aria-level="2" is equivalent to an <h2> heading.

Except in special cases, it is recommended to use native heading tags rather than role="heading" for semantic clarity and accessibility.

Using Heading Tags to Improve Web Accessibility

For users relying on screen readers, it is essential to easily understand and navigate content. Websites or content designed only with non-screen reader users in mind can create confusion and difficulties for those using assistive technologies. Ensuring universal access is a key principle in the development of the web.

Providing labels for content areas helps screen reader users quickly identify the structure and purpose of the content.

There are label attributes specifically for screen readers. Using aria-label or aria-labelledby can enhance web accessibility. See the following references:

By using aria-labelledby together with the id attribute, you can associate a heading tag with a content area to provide a meaningful label. This technique is particularly useful when there are many content sections on a webpage.

HTML 
<nav aria-labelledby="main-menu-heading">
    <h2 id="main-menu-heading">Main Menu</h2>
    <!-- Main menu items -->
</nav>

Code Explanation
The <nav> tag represents a section containing links for navigation, either to other pages or within the current page. Common examples include menus, tables of contents, or indexes.

In the example above, aria-labelledby="main-menu-heading" sets the label for the <nav> element. Specifically, the heading tag with id="main-menu-heading" is defined as an <h2>. This allows screen readers to announce "Main Menu" when encountering the <nav> tag.

Technical Syntax Summary

Technical Syntax Summary of the h1~h6 tags
Permitted parents Any element that accepts flow content.
Permitted content Phrasing content.
Implicit ARIA role heading
Permitted ARIA roles tab, presentation or none

Syntax Notes

Heading tags cannot be used inside an <address> tag.

Browser compatibility

Browser compatibility for the h1~h6 tags
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<h1>~<h6> 예 예 예 예

Specifications

Specification for the h1~h6 tags
Specification
<h1>~<h6> HTML Standard
#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

References

See also