SiteLint documentation and guidelines

Headings hierarchy

Description

A proper heading hierarchy in HTML is crucial for structuring content in a logical and accessible manner. Headings (<h1> to <h6>) provide a way to organize content, making it easier for users and assistive technologies to understand and navigate the document. A well-defined heading hierarchy improves readability and accessibility, ensuring that all users can efficiently find and understand the information they need.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers use headings to navigate through content. A logical heading structure helps them understand the document’s organization.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and consistent headings, which help break down content into manageable sections.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices can use headings to quickly move through content.

Why it matters

A proper heading hierarchy enhances the accessibility and usability of a webpage by providing a clear structure and making it easier for users to navigate and understand the content. Without a logical hierarchy, users may struggle to find information, leading to a poor user experience. Ensuring that headings are used correctly and consistently helps all users, including those relying on assistive technologies.

Coding problems and solutions

Common coding problems

  • Skipping heading levels: using headings out of order (e.g., jumping from <h1> to <h3> without an <h2>).
  • Inconsistent heading levels: using heading levels inconsistently, leading to a disorganized structure.
  • Using headings for styling: using heading elements purely for their default styling rather than their semantic meaning.

How to fix it

Follow a logical order

Use headings in a sequential and nested order to reflect the document structure.

Correct example
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
Incorrect example
<h1>Main Title</h1>
<h3>Section Title</h3>
<h2>Subsection Title</h2>

Be consistent with heading levels

Maintain consistent heading levels throughout the document to ensure a clear hierarchy.

Correct example
<h1>Main Title</h1>
<h2>First Section</h2>
<h2>Second Section</h2>
<h3>Subsection</h3>
Incorrect example
<h1>Main Title</h1>
<h2>First Section</h2>
<h3>Second Section</h3>
<h2>Subsection</h2>

Use headings semantically

Use headings to denote the structure of the content, not just for styling purposes.

Correct example
<h2>About Us</h2>
<p>Information about the company.</p>
Incorrect example
<div style="font-size: 24px;">About Us</div>
<p>Information about the company.</p>

Known limitations

  • Dynamic content: ensure that dynamically generated content maintains a proper heading hierarchy.
  • Complex documents: for complex documents, carefully plan and test the heading structure to ensure it remains logical and accessible.
  • Browser and assistive technology variability: test across different browsers and assistive technologies to ensure consistent interpretation of the heading hierarchy.

Resources