HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLHeadings Hierarchy (H1-H6)
Text Content & Typography

Headings Hierarchy (H1-H6)

Headings are the backbone of document structure. Master the hierarchy from H1 to H6 for better SEO, accessibility, and content organization.

The Six Heading Levels

HTML provides six levels of headings, from <h1> (most important) to<h6> (least important). They create a hierarchical outline of your content.

All Heading Levels
HTML
<h1>Main Page Title (H1)</h1>
<h2>Section Heading (H2)</h2>
<h3>Subsection Heading (H3)</h3>
<h4>Sub-subsection Heading (H4)</h4>
<h5>Minor Heading (H5)</h5>
<h6>Smallest Heading (H6)</h6>

Visual Hierarchy:

H1 - Main Title

H2 - Section Title

H3 - Subsection

H4 - Sub-subsection

H5 - Minor Heading
H6 - Smallest Heading

The H1 Element: Your Page Title

The <h1> is the most important heading—it represents the main topic of your page.

H1 Best Practices:

  • ✅ Use one H1 per page (most important rule)
  • ✅ Make it descriptive and relevant to page content
  • ✅ Include your primary keyword if doing SEO
  • ✅ Keep it concise (ideally under 70 characters)
  • ❌ Don't use multiple H1s (confuses search engines)
  • ❌ Don't make it too generic ("Welcome" or "Home")
✅ Good H1 Examples
HTML
<h1>Complete Guide to HTML Headings</h1>
<h1>How to Master JavaScript in 30 Days</h1>
<h1>The Ultimate SEO Checklist for 2025</h1>
❌ Bad H1 Examples
HTML
<h1>Welcome</h1>              <!-- Too generic --&gt;
<h1>Page 1</h1>               <!-- Not descriptive --&gt;
<h1>Click Here</h1>           <!-- Not informative --&gt;
<h1>Learn About Everything About Web Development, HTML, CSS, JavaScript, and More</h1>  <!-- Too long --&gt;

Heading Hierarchy Rules

Headings should form a logical outline. Think of them like a table of contents in a book.

Key Rules:

  1. Don't skip levels: Go from H2 to H3, not H2 to H4
  2. Maintain logical flow: Each heading level indicates content hierarchy
  3. Use headings for structure, not styling: Don't choose headings based on size
✅ Correct Hierarchy
HTML
<h1>Complete Web Development Course</h1>

<h2>1. Introduction to HTML</h2>
<h3>What is HTML?</h3>
<h3>HTML History</h3>
<h4>HTML 1.0</h4>
<h4>HTML 2.0</h4>
<h4>HTML5</h4>

<h2>2. HTML Elements</h2>
<h3>Block Elements</h3>
<h3>Inline Elements</h3>

<h2>3. Advanced Topics</h2>
<h3>Semantic HTML</h3>
<h4>Header Elements</h4>
<h4>Footer Elements</h4>
❌ Incorrect Hierarchy
HTML
<h1>Web Development</h1>

<h4>Introduction</h4>  <!-- Skips H2 and H3! --&gt;

<h2>HTML Basics</h2>
<h5>What is HTML?</h5>  <!-- Skips H3 and H4! --&gt;

<h3>CSS Styling</h3>  <!-- Should be H2, not H3 --&gt;

Document Outline Visualization:

TEXT
H1: Complete Web Development Course
│
├── H2: Introduction to HTML
│   ├── H3: What is HTML?
│   ├── H3: HTML History
│   │   ├── H4: HTML 1.0
│   │   ├── H4: HTML 2.0
│   │   └── H4: HTML5
│
├── H2: HTML Elements
│   ├── H3: Block Elements
│   └── H3: Inline Elements
│
└── H2: Advanced Topics
    └── H3: Semantic HTML
        ├── H4: Header Elements
        └── H4: Footer Elements

SEO Benefits of Proper Headings

Search engines use headings to understand your content structure and relevance.

How Headings Impact SEO:

  • Content Hierarchy: Google uses headings to understand what your page is about. H1 carries the most weight, followed by H2, H3, etc.
  • Keyword Placement: Including relevant keywords in headings (especially H1 and H2) helps search engines rank your content for those terms.
  • Featured Snippets: Well-structured headings increase chances of appearing in Google's featured snippets and "People also ask" sections.
  • User Experience: Clear headings improve dwell time (how long users stay), which is a ranking signal.
SEO-Optimized Heading Structure
HTML
<h1>How to Learn HTML for Beginners (Primary Keyword)</h1>

<h2>What is HTML? (Related Question)</h2>
<p>Content explaining HTML basics...</p>

<h2>Why Learn HTML in 2025? (Value Proposition)</h2>
<p>Content explaining benefits...</p>

<h2>HTML Learning Roadmap for Beginners (Secondary Keyword)</h2>
<h3>Step 1: Understand HTML Syntax</h3>
<p>Content about syntax...</p>

<h3>Step 2: Learn Essential HTML Tags</h3>
<p>Content about tags...</p>

<h2>Best HTML Learning Resources (Related Topic)</h2>
<h3>Free HTML Tutorials</h3>
<h3>Paid HTML Courses</h3>

Accessibility: Headings for Screen Readers

Screen reader users often navigate pages by jumping between headings. Proper hierarchy is crucial for accessibility.

Accessibility Best Practices:

  • Navigation Aid: Screen readers can list all headings on a page, allowing users to quickly jump to sections.
  • Descriptive Text: Make headings self-explanatory. "Our Services" is better than "Services".
  • Avoid "Click Here": Headings should describe content, not actions.
  • Don't use headings for styling: If you need bigger text, use CSS, not H tags.
Accessible vs. Inaccessible Headings
HTML
<!-- ✅ Accessible --&gt;
<h2>Our Premium Web Development Services</h2>
<h3>Front-End Development with React</h3>
<h3>Back-End Development with Node.js</h3>

<!-- ❌ Not Accessible --&gt;
<h2>Services</h2>  <!-- Too vague --&gt;
<h3>Click Here</h3>  <!-- Not descriptive --&gt;
<h3>Learn More</h3>  <!-- Doesn't explain what you'll learn --&gt;

Styling Headings with CSS

Never choose a heading level based on its default size. Use CSS to style headings while maintaining semantic structure.

CSS Heading Styling
CSS
/* Reset default heading sizes */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: bold;
    line-height: 1.2;
}

/* Set custom sizes */
h1 {
    font-size: 2.5rem;  /* 40px if base is 16px */
    margin-bottom: 1.5rem;
    color: #333;
}

h2 {
    font-size: 2rem;  /* 32px */
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #444;
}

h3 {
    font-size: 1.75rem;  /* 28px */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #555;
}

/* Make an H3 look like an H1 if needed */
h3.hero-heading {
    font-size: 2.5rem;
    color: #333;
}

/* Responsive typography */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}
💡 Pro Tip: Use relative units (rem or em) instead of pixels. This respects user's browser settings and improves accessibility.

Common Heading Mistakes

❌ Mistake #1: Multiple H1s

Problem: Using multiple H1 elements confuses search engines about your page's main topic.

HTML
<h1>Welcome to Our Site</h1>
<h1>About Our Services</h1>  <!-- Wrong! --&gt;
<h1>Contact Us</h1>  <!-- Wrong! --&gt;

Solution: Use one H1, then H2 for major sections:

HTML
<h1>Welcome to Our Site</h1>
<h2>About Our Services</h2>
<h2>Contact Us</h2>

❌ Mistake #2: Skipping Levels

Problem: Jumping from H2 to H4 breaks the logical outline.

HTML
<h2>Main Section</h2>
<h4>Subsection</h4>  <!-- Wrong! Skips H3 --&gt;

Solution: Follow sequential order:

HTML
<h2>Main Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

❌ Mistake #3: Using Headings for Styling

Problem: Choosing heading levels based on size, not structure.

HTML
<h5>This is important text</h5>  <!-- Wrong! H5 for big text --&gt;

Solution: Use appropriate heading level, then style with CSS:

HTML
<h2 class="large-text">This is important text</h2>

<style>
.large-text {
    font-size: 2.5rem;
}
</style>

❌ Mistake #4: Empty or Meaningless Headings

Problem: Headings that don't describe content.

HTML
<h2>Section</h2>  <!-- Too vague --&gt;
<h2>Click Here</h2>  <!-- Not descriptive --&gt;
<h2>More Info</h2>  <!-- What info? --&gt;

Solution: Be specific and descriptive:

HTML
<h2>Our Web Development Services</h2>
<h2>How to Get Started</h2>
<h2>Pricing and Plans</h2>

Headings Checklist

✅ Before Publishing, Verify:

  • ☑ Page has exactly one H1
  • ☑ H1 describes the main topic
  • ☑ Headings follow sequential order (no skipped levels)
  • ☑ Headings create a logical outline
  • ☑ Headings are descriptive and meaningful
  • ☑ Keywords included naturally in headings
  • ☑ Headings work for both sighted users and screen reader users
  • ☑ Styling is done with CSS, not heading choice

What's Next?

Now that you understand headings, let's explore paragraphs and text formatting to complete your typography knowledge.

Next: Paragraphs & Text Formatting →