Overview

HTML headings and sections are fundamental building blocks for creating well-structured, accessible web content. Headings (h1-h6) provide document hierarchy, while section elements organize content into logical groups. Proper use of headings and sections improves accessibility, SEO, and user experience.

Best Practice: Always use proper heading hierarchy (h1 → h2 → h3) and semantic section elements to create accessible, well-structured content that search engines can understand.

Why Headings and Sections Matter

  • Accessibility: Screen readers use headings to navigate and understand content structure
  • SEO: Search engines use headings to understand page content and hierarchy
  • User Experience: Clear structure helps users scan and find information quickly
  • Maintainability: Well-organized content is easier to update and maintain
  • Standards Compliance: Follows HTML5 semantic standards and accessibility guidelines

Heading Elements (h1-h6)

Heading Hierarchy

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Each page should have exactly one <h1> element representing the main topic.

Heading Structure Example

<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<h5>Minor Section Title</h5>
<h6>Smallest Section Title</h6>

Heading Best Practices

  • One H1 per page: Each page should have exactly one main heading
  • Logical hierarchy: Don't skip heading levels (h1 → h2 → h3, not h1 → h4)
  • Descriptive text: Use clear, descriptive heading text
  • Appropriate length: Keep headings concise but informative
  • Semantic meaning: Use headings for structure, not just styling
Accessibility Tip: Screen readers use headings to create a table of contents for navigation. Proper heading hierarchy is crucial for accessibility.

Heading Hierarchy Guidelines

Proper Heading Structure

A well-structured heading hierarchy helps both users and search engines understand your content. Think of headings as an outline of your page.

Good Heading Structure

<h1>HTML Tutorial</h1>
  <h2>Introduction to HTML</h2>
    <h3>What is HTML?</h3>
    <h3>HTML History</h3>
  <h2>Basic Elements</h2>
    <h3>Paragraphs</h3>
    <h3>Headings</h3>
      <h4>Heading Levels</h4>
      <h4>Heading Best Practices</h4>
    <h3>Lists</h3>
  <h2>Advanced Topics</h2>
    <h3>Forms</h3>
    <h3>Tables</h3>

Common Mistakes to Avoid

  • Skipping levels: Don't go from h1 to h4 without h2 and h3
  • Multiple h1 elements: Use only one h1 per page
  • Using headings for styling: Use CSS for visual styling, not heading levels
  • Empty headings: Always provide meaningful text in headings
  • Inconsistent hierarchy: Maintain logical structure throughout the page
SEO Tip: Search engines use heading hierarchy to understand content importance and relationships. Proper structure can improve search rankings.

Section Elements

Semantic Section Elements

HTML5 introduced semantic section elements that provide meaning to different parts of your content. These elements help browsers, screen readers, and search engines understand your page structure.

<section> Element

The <section> element represents a standalone section of a document. It should have a heading and contain thematically grouped content. 

<section>
  <h2>About Our Company</h2>
  <p>We are a leading technology company...</p>
  <p>Our mission is to...</p>
</section>

<article> Element

The <article> element represents a self-contained composition that could be independently distributable (e.g., blog post, news article, comment). 

<article>
  <header>
    <h2>Blog Post Title</h2>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>
  <p>Article content...</p>
</article>

<aside> Element

The <aside> element represents content that is tangentially related to the main content (e.g., sidebars, pull quotes, advertising). 

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">Related Article 1</a></li>
    <li><a href="#">Related Article 2</a></li>
  </ul>
</aside>
Best Practice: Use semantic section elements to provide meaning to your content structure, not just for styling purposes.

Accessibility Guidelines

Screen Reader Navigation

Screen readers use headings to create a navigable table of contents. Users can jump between headings to quickly find information.

  • Heading navigation: Screen readers can list all headings for quick navigation
  • Landmark navigation: Section elements create landmarks for navigation
  • Content structure: Clear hierarchy helps users understand content relationships
  • Skip links: Proper headings enable effective skip navigation
WCAG Compliance: Proper heading hierarchy is required for WCAG 2.1 AA compliance and is fundamental to creating accessible web content.

Testing Accessibility

Test your heading structure with these tools and techniques:

  • Screen reader testing: Use NVDA, JAWS, or VoiceOver to test navigation
  • Heading outline tools: Browser extensions can show heading structure
  • Automated testing: Tools like axe DevTools can detect heading issues
  • Manual review: Check that heading hierarchy makes logical sense

SEO Benefits

Search Engine Understanding

Search engines use headings and sections to understand your content structure and determine the relevance of your pages for different search queries.

  • Content hierarchy: Search engines understand content importance through heading levels
  • Topic relevance: Headings help search engines identify page topics
  • Featured snippets: Well-structured content is more likely to appear in featured snippets
  • Rich results: Semantic markup can enhance search result appearance
SEO Best Practices: Include relevant keywords in headings naturally, maintain proper hierarchy, and ensure headings accurately describe the content that follows.

Structured Data

Combine semantic HTML with structured data markup for enhanced search results: 

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">Article Title</h1>
  <section>
    <h2>Introduction</h2>
    <p itemprop="description">Article description...</p>
  </section>
</article>

Check Your Understanding

Multiple Choice Questions

  1. How many h1 elements should a page have?
  2. What is the correct heading hierarchy?
  3. Which element represents a standalone section?
  4. What element is used for self-contained content like blog posts?
  5. Why is heading hierarchy important for accessibility?
  6. How do search engines use headings?
  7. What element represents supplementary content?
  8. What is the purpose of semantic section elements?
Show Answers
  1. Exactly one h1 element per page.
  2. h1 → h2 → h3 → h4 → h5 → h6 (don't skip levels).
  3. The <section> element represents a standalone section.
  4. The <article> element is used for self-contained content.
  5. Screen readers use headings to navigate and understand content structure.
  6. Search engines use headings to understand content hierarchy and relevance.
  7. The <aside> element represents supplementary content.
  8. They provide meaning to content structure for browsers, screen readers, and search engines.

Practical Exercise

Create a well-structured HTML page that includes:

  • One h1 heading for the main title
  • Multiple h2 headings for main sections
  • h3 headings for subsections
  • Semantic section elements
  • Proper heading hierarchy

Further Reading

Official Documentation

Accessibility Resources

SEO Resources