Skip to content
finote

02. h1 to h6

Introduction

Section titled “Introduction”

Heading tags (<h1> through <h6>) create a hierarchical structure for your HTML documents. They define the importance and organization of content sections, helping both users and search engines understand the document’s structure. Proper use of heading tags is essential for accessibility, SEO, and creating well-organized web pages.

Heading Hierarchy

Section titled “Heading Hierarchy”

HTML provides six levels of headings:

<h1>Most Important - Level 1</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Least Important - Level 6</h6>

Visual Hierarchy

Section titled “Visual Hierarchy”

By default, browsers display headings with decreasing font sizes:

  • <h1>: Largest (typically 2em)
  • <h2>: Second largest (typically 1.5em)
  • <h3>: Medium (typically 1.17em)
  • <h4>: Default size
  • <h5>: Smaller
  • <h6>: Smallest (typically 0.83em)

Note: Don’t choose headings based on size. Use CSS for styling.

Semantic Meaning

Section titled “Semantic Meaning”

Headings provide semantic structure:

<article>
    <h1>Article Title</h1>
    <section>
        <h2>Introduction</h2>
        <p>Content...</p>
    </section>
    <section>
        <h2>Main Content</h2>
        <h3>Subsection A</h3>
        <h3>Subsection B</h3>
    </section>
</article>

Best Practices

Section titled “Best Practices”

One H1 Per Page

Section titled “One H1 Per Page”

Use only one <h1> per page:

<!-- Good -->
<body>
    <h1>Page Title</h1>
    <h2>Section</h2>
</body>


<!-- Avoid -->
<body>
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</body>

Maintain Hierarchy

Section titled “Maintain Hierarchy”

Don’t skip heading levels:

<!-- Good -->
<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>


<!-- Avoid -->
<h1>Main Title</h1>
<h3>Section</h3>  <!-- Skipped h2 -->

Use for Structure

Section titled “Use for Structure”

Use headings for document structure:

<!-- Good: Semantic structure -->
<h1>Article Title</h1>
<h2>Introduction</h2>
<h2>Main Content</h2>
<h3>Topic A</h3>
<h3>Topic B</h3>


<!-- Avoid: Using for styling -->
<h4>Small text</h4>  <!-- Use <p> with CSS instead -->

Accessibility

Section titled “Accessibility”

Headings help screen readers navigate:

<article>
    <h1>Article Title</h1>
    <h2>Section 1</h2>
    <h2>Section 2</h2>
</article>

Screen readers can:

  • List all headings
  • Jump between sections
  • Understand document structure

SEO Benefits

Section titled “SEO Benefits”

Search engines use headings to understand content:

<h1>Primary Topic</h1>
<h2>Main Sections</h2>
<h3>Subtopics</h3>

Proper heading structure:

  • Improves SEO
  • Helps search engines understand hierarchy
  • Enhances content organization

Common Patterns

Section titled “Common Patterns”

Article Structure

Section titled “Article Structure”
<article>
    <h1>Article Title</h1>
    <h2>Introduction</h2>
    <h2>Main Content</h2>
    <h3>Subsection 1</h3>
    <h3>Subsection 2</h3>
    <h2>Conclusion</h2>
</article>

Page Layout

Section titled “Page Layout”
<body>
    <header>
        <h1>Site Title</h1>
    </header>
    <main>
        <article>
            <h2>Article Title</h2>
            <h3>Section</h3>
        </article>
    </main>
</body>

Styling Headings

Section titled “Styling Headings”

Use CSS for visual styling:

<h1>Title</h1>


<style>
    h1 {
        font-size: 3rem;
        color: #333;
        font-weight: bold;
    }
</style>

Common Mistakes

Section titled “Common Mistakes”

Using for Size

Section titled “Using for Size”

Problem:

<h4>Small text</h4>

Solution:

<p style="font-size: 0.8em;">Small text</p>

Skipping Levels

Section titled “Skipping Levels”

Problem:

<h1>Title</h1>
<h3>Section</h3>

Solution:

<h1>Title</h1>
<h2>Section</h2>

Multiple H1s

Section titled “Multiple H1s”

Problem:

<h1>Title 1</h1>
<h1>Title 2</h1>

Solution:

<h1>Main Title</h1>
<h2>Title 2</h2>

References

Section titled “References”