HTML Headings Guide

Proper use of heading elements (h1-h6) for document structure and accessibility

h1

Main page heading, should be used once per page as the primary title

Usage: Highest level, typically for page titles

<h1>Welcome to Our Website</h1>

h2

Major section headings that fall under the main title

Usage: Second level, for main content sections

<h2>Our Services</h2>

h3

Sub-sections that belong to an h2 section

Usage: Third level, for sub-sections

<h3>Web Development</h3>

h4

Further divisions under h3 sections

Usage: Fourth level, for detailed sub-sections

<h4>Frontend Technologies</h4>

h5

Minor headings for less important divisions

Usage: Fifth level, rarely needed

<h5>React Framework</h5>

h6

Lowest-level headings for fine-grained organization

Usage: Sixth level, very rarely used

<h6>Component Lifecycle</h6>

Logical Hierarchy

Maintain a consistent, logical structure without skipping levels (e.g., Don't go from h2 to h4).

Good Example

<h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2><h1>Main Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2>

Bad Example

<h1>Main Title</h1>
<h3>Section (skipped h2)</h3>
<h5>Subsection (skipped h4)</h5><h1>Main Title</h1>
<h3>Section (skipped h2)</h3>
<h5>Subsection (skipped h4)</h5>

Single h1 per Page

Each page should have only one h1 element representing the main content focus.

Good Example

<h1>Product Documentation</h1><h1>Product Documentation</h1>

Bad Example

<h1>Product Docs</h1>
<h1>Table of Contents</h1><h1>Product Docs</h1>
<h1>Table of Contents</h1>

Semantic Meaning

Use headings to structure content, not just for visual styling.

Good Example

<h2>Features</h2>
<p>Our product includes...</p><h2>Features</h2>
<p>Our product includes...</p>

Bad Example

<div style="font-size: 2em; font-weight: bold">Features</div>
<p>Our product includes...</p><div style="font-size: 2em; font-weight: bold">Features</div>
<p>Our product includes...</p>

Accessibility

Screen readers rely on proper heading structure for navigation.

Good Example

<h1>Page Title</h1>
<h2>Main Content</h2>
<h3>Details</h3><h1>Page Title</h1>
<h2>Main Content</h2>
<h3>Details</h3>

Bad Example

<div style="font-size: 2em">Page Title</div>
<div style="font-size: 1.5em">Main Content</div><div style="font-size: 2em">Page Title</div>
<div style="font-size: 1.5em">Main Content</div>

Article Structure

<article>
  <h1>The Future of Web Development</h1>
  <h2>Introduction</h2>
  <p>Web development is evolving rapidly...</p>
  
  <h2>Current Trends</h2>
  <h3>JavaScript Frameworks</h3>
  <p>React, Vue and Angular continue...</p>
  <h3>Web Components</h3>
  <p>The native component model...</p>
  
  <h2>Conclusion</h2>
  <p>The future looks promising...</p>
</article><article>
  <h1>The Future of Web Development</h1>
  <h2>Introduction</h2>
  <p>Web development is evolving rapidly...</p>
  
  <h2>Current Trends</h2>
  <h3>JavaScript Frameworks</h3>
  <p>React, Vue and Angular continue...</p>
  <h3>Web Components</h3>
  <p>The native component model...</p>
  
  <h2>Conclusion</h2>
  <p>The future looks promising...</p>
</article>

Multi-column Layout

<div class="container">
  <h1>Company Blog</h1>
  
  <div class="row">
    <div class="column">
      <h2>Technology</h2>
      <h3>Latest Updates</h3>
      <h3>How-To Guides</h3>
    </div>
    
    <div class="column">
      <h2>Business</h2>
      <h3>Industry News</h3>
      <h3>Case Studies</h3>
    </div>
  </div>
</div><div class="container">
  <h1>Company Blog</h1>
  
  <div class="row">
    <div class="column">
      <h2>Technology</h2>
      <h3>Latest Updates</h3>
      <h3>How-To Guides</h3>
    </div>
    
    <div class="column">
      <h2>Business</h2>
      <h3>Industry News</h3>
      <h3>Case Studies</h3>
    </div>
  </div>
</div>

Accessibility with ARIA

<!-- Only use when HTML headings aren't possible -->
<div role="heading" aria-level="1">Main Title</div>
<div role="heading" aria-level="2">Section Title</div>

<!-- Better to use native HTML -->
<h1>Main Title</h1>
<h2>Section Title</h2><!-- Only use when HTML headings aren't possible -->
<div role="heading" aria-level="1">Main Title</div>
<div role="heading" aria-level="2">Section Title</div>

<!-- Better to use native HTML -->
<h1>Main Title</h1>
<h2>Section Title</h2>

Headings Playground

Experiment with heading structures in our live editor

Heading Examples Preview

Ready-to-use examples covering proper heading hierarchy

Live Preview

Proper Heading Structure

h1. Main Title

h2. Section

h3. Subsection

h2. Another Section

Bad Practices

h3. Main Title (should be h1)

h6. Section (should be h2)

h4. Subsection (inconsistent)

All examples will be loaded into an interactive editor where you can modify and test them

HTML Headings Guide

Heading Levels (h1-h6)

h1

h2

h3

h4

h5

h6

Heading Best Practices

Logical Hierarchy

Single h1 per Page

Semantic Meaning

Accessibility

Advanced Examples

Article Structure

Multi-column Layout

Accessibility with ARIA

Headings Playground

Heading Examples Preview

Proper Heading Structure

h1. Main Title

h2. Section

h3. Subsection

h2. Another Section

Bad Practices

h3. Main Title (should be h1)

h6. Section (should be h2)

h4. Subsection (inconsistent)

Continue Learning

HTML Attributes

HTML Paragraphs