### 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="subtitle">Supporting subtitle</small>
            </h1>
            <h2>
                Secondary Header
                <small class="subtitle">Additional context</small>
            </h2>
            <h3>
                Tertiary Header
                <small class="subtitle">Brief description</small>
            </h3>
            <h4>
                Quaternary Header
                <small class="subtitle">Extra details</small>
            </h4>
            <h5>
                Quinary Header
                <small class="subtitle">Minor note</small>
            </h5>
            <h6>
                Senary Header
                <small class="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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!