HTML Course 15.2 Correct use of headings for content hierarchy (h1–h6)

15.2 Correct Use of Headings for Content Hierarchy (h1–h6)

Headings (h1–h6) define the logical structure of a document, helping both users and machines understand the organization of content. Proper usage ensures:

• Accessibility: Screen readers build a document outline from headings.
• SEO Benefits: Search engines index headings hierarchically.
• Maintainability: Clear sections improve readability and future updates.

Semantic Hierarchy and Best Practices

1. Use one h1 per page as the main title.
2. Follow numerical order without skipping levels (e.g., h1 → h2 → h3).
3. Avoid jumping from h2 directly to h4—this breaks the outline.
4. Use headings to introduce new sections, not for styling purposes.
5. Keep headings concise and descriptive.

Screen Reader Outline

Assistive technologies generate an outline from headings. A properly nested sequence might look like:

• h1: Site Title
• h2: Section
• h3: Subsection
• h3: Another Subsection
• h2: Next Section

Example 1: Basic Article Structure

This example shows a simple blog post outline. Notice the single h1 and sequential use of h2 and h3.

  <!-- Main Title -->
  <h1>Understanding Web Accessibility</h1>

  <!-- Introduction Section -->
  <h2>Introduction</h2>
  <p>Web accessibility ensures that websites are usable by people of all abilities.</p>

  <!-- Key Concepts Section -->
  <h2>Key Concepts</h2>
    <h3>Perceivable</h3>
    <p>Information must be presented in ways users can perceive.</p>

    <h3>Operable</h3>
    <p>Interface components must be operable via keyboard or other inputs.</p>

  <!-- Conclusion Section -->
  <h2>Conclusion</h2>
  <p>Following accessibility guidelines improves user experience for everyone.</p>

Example 2: Complex Documentation

In longer documents, deeper levels (h4–h6) clarify subtopics.

<!-- Chapter Title (h1) omitted here for brevity -->

<h2>Chapter 3: Form Elements</h2>

  <h3>3.1 Text Inputs</h3>
    <h4>3.1.1 Single-line Input</h4>
    <p>Use <code><input type='text'></code> for single-line text.</p>

    <h4>3.1.2 Multi-line Input</h4>
    <p>Use <code><textarea></code> for multi-line text.</p>

  <h3>3.2 Selection Elements</h3>
    <h4>3.2.1 Checkboxes</h4>
    <p>Use <code><input type='checkbox'></code> for binary options.</p>

    <h4>3.2.2 Radio Buttons</h4>
    <p>Use <code><input type='radio'></code> for single choice in a group.</p>

Common Mistakes to Avoid

• Skipping heading levels (e.g., h2 directly to h5).
• Using multiple h1 elements on the same page.
• Relying on headings for visual styling instead of structure.
• Including non-structural text (like “Read more”) inside headings.

Summary

Consistent, hierarchical use of h1–h6:

1. Improves accessibility by creating a clear outline.
2. Aids SEO by signaling document structure to crawlers.
3. Enhances maintainability and readability for developers.