Heading Hierarchy

HTML provides six levels of headings (h1-h6) for document structure and semantic hierarchy.

All Heading Levels

Each heading level represents a different level of importance and hierarchy.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
HTML 
<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>

Heading Group (hgroup)

Use hgroup to semantically group a heading with related content like subtitles.

Main Title

Supporting tagline or subtitle

HTML 
<hgroup>
            <h1>Main Title</h1>
            <p>Supporting tagline or subtitle</p>
        </hgroup>

Headings with Content

Headings paired with body text demonstrate visual hierarchy in real content.

Article Structure

Article Title (H1)

This is the introduction paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section Heading (H2)

This section covers the main topic. Quisque aliquam libero nisi, imperdiet at tincidunt nec.

Subsection Heading (H3)

Diving deeper into the topic. Praesent mattis massa quis luctus fermentum.

Detail Heading (H4)

Specific details and information. Maecenas ornare tortor sed tellus eget sapien.

HTML 
<article>
            <h1>Article Title (H1)</h1>
            <p>
                This is the introduction paragraph. Lorem ipsum dolor sit amet,
                consectetur adipiscing elit.
            </p>

            <h2>Section Heading (H2)</h2>
            <p>
                This section covers the main topic. Quisque aliquam libero
                nisi, imperdiet at tincidunt nec.
            </p>

            <h3>Subsection Heading (H3)</h3>
            <p>
                Diving deeper into the topic. Praesent mattis massa quis luctus
                fermentum.
            </p>

            <h4>Detail Heading (H4)</h4>
            <p>
                Specific details and information. Maecenas ornare tortor sed
                tellus eget sapien.
            </p>
        </article>

Headings with Subtitles

Add supporting text to headings using the subtitle class.

Subtitle Examples

Primary Header Supporting subtitle

Secondary Header Additional context

Tertiary Header Brief description

Quaternary Header Extra details

Quinary Header Minor note
Senary Header Smallest level
HTML 
<h1>
            Primary Header
            <small class="ss-c-subtitle">Supporting subtitle</small>
        </h1>
        <h2>
            Secondary Header
            <small class="ss-c-subtitle">Additional context</small>
        </h2>
        <h3>
            Tertiary Header
            <small class="ss-c-subtitle">Brief description</small>
        </h3>
        <h4>
            Quaternary Header
            <small class="ss-c-subtitle">Extra details</small>
        </h4>
        <h5>
            Quinary Header
            <small class="ss-c-subtitle">Minor note</small>
        </h5>
        <h6>
            Senary Header
            <small class="ss-c-subtitle">Smallest level</small>
        </h6>

Semantic Heading Names

The official names for each heading level in document hierarchy.

Heading Level Names

Primary (H1) — Page title, one per page

Secondary (H2) — Major sections

Tertiary (H3) — Subsections

Quaternary (H4) — Sub-subsections

Quinary (H5) — Fine details
Senary (H6) — Rarely used, deepest level
HTML 
<h1>Primary (H1) — Page title, one per page</h1>
        <h2>Secondary (H2) — Major sections</h2>
        <h3>Tertiary (H3) — Subsections</h3>
        <h4>Quaternary (H4) — Sub-subsections</h4>
        <h5>Quinary (H5) — Fine details</h5>
        <h6>Senary (H6) — Rarely used, deepest level</h6>

Heading Class Variants

Class-based heading styles for elements that need heading typography without heading semantics.

Heading Classes

Heading class .ss-t-h1

Heading class .ss-t-h2

Heading class .ss-t-h3

Heading class .ss-t-h4

Heading class .ss-t-h5

Heading class .ss-t-h6

HTML 
<p class="ss-t-h1">Heading class .ss-t-h1</p>
        <p class="ss-t-h2">Heading class .ss-t-h2</p>
        <p class="ss-t-h3">Heading class .ss-t-h3</p>
        <p class="ss-t-h4">Heading class .ss-t-h4</p>
        <p class="ss-t-h5">Heading class .ss-t-h5</p>
        <p class="ss-t-h6">Heading class .ss-t-h6</p>

Uppercase Variants

Caps heading .ss-t-h1--caps

Caps heading .ss-t-h2--caps

Caps heading .ss-t-h3--caps

Caps heading .ss-t-h4--caps

Caps heading .ss-t-h5--caps

Caps heading .ss-t-h6--caps

HTML 
<p class="ss-t-h1--caps">Caps heading .ss-t-h1--caps</p>
        <p class="ss-t-h2--caps">Caps heading .ss-t-h2--caps</p>
        <p class="ss-t-h3--caps">Caps heading .ss-t-h3--caps</p>
        <p class="ss-t-h4--caps">Caps heading .ss-t-h4--caps</p>
        <p class="ss-t-h5--caps">Caps heading .ss-t-h5--caps</p>
        <p class="ss-t-h6--caps">Caps heading .ss-t-h6--caps</p>

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

HTML 
<p class="ss-t-display-1">Display 1</p>
        <p class="ss-t-display-2">Display 2</p>
        <p class="ss-t-display-3">Display 3</p>
        <p class="ss-t-display-4">Display 4</p>
        <p class="ss-t-display-5">Display 5</p>
        <p class="ss-t-display-6">Display 6</p>