New Components

Headings

A heading is a textual element used to define the title or topic of a section within a webpage. It helps to organize the content into meaningful sections, making it easier to navigate and understand. Headings provide structure and context for readers, including users who rely on assistive technologies like screen readers.

When to use

  • To organize and structure page content hierarchically. Headings help create a navigable structure that can be used to create a table of contents.
  • To indicate main sections and subsections. Proper use of headings ensures screen readers can correctly interpret the page structure
  • To provide context and meaning allowing users to understand the structure of the content and navigate through the page efficiently.
  • To improve navigation and comprehension, especially for individuals with cognitive impairments.

When not to use

  • For visual styling only. Do not use heading tags just for their visual styles. If you want to style text without implying its importance, use other elements like <p>, <div>, or <span> with appropriate CSS.
  • Don’t skip heading levels. For example, using <h3> directly after an <h1> without using <h2> is confusing and affects the document structure. Stick to a logical, sequential order for headings.
  • Don’t use headings for small sections that don’t require a hierarchical structure. For example, a minor note or a footer should not use heading tags.

On this page

Keywords

  • Headings: A textual element that defines the sections or content just below it.
  • Hierarchy: Organisation of headings within a page that helps to understand the page structure

Breakdown of Components

  • Use <h1> to <h6> tags in the appropriate hierarchical order.
  • The <h1> heading should be unique, and representative of the main topic of the web page.
  • Do not choose heading levels based on visual appearance.
  • Avoid using bold text instead of a heading.
  • Maintain appropriate and moderate heading usage.

Semantic Headings

Using semantic HTML for headings is essential to ensure a correct content structure and optimal accessibility.
Semantic headings are headings that use the native HTML heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
These elements convey the document structure to all users, including those using assistive technologies.
Benefits of using semantic headings:

  1. They are natively recognized by screen readers and assistive tools.
  2. They provide keyboard navigation shortcuts (screen readers allow navigation by heading level).
  3. They improve SEO (search engines understand the document structure).
  4. They ensure consistency and maintainability in the code.

Non Semantic headings

When a semantic heading element cannot be used (for example in components using custom elements or visual styles), use the following ARIA pattern to expose a heading:

HTML
<div role='heading' aria-level='2'>Section Title</div>
  • role='heading' announces the element as a heading to assistive technologies.
  • aria-level='N' (where N is 1 to 6) specifies the hierarchical level of the heading.
  • This technique should only be used when using a native heading tag is not possible.

General Best Practices for Heading Tags

Use one <h1> per page:

The <h1> tag should represent the main topic of the page. Using more than one <h1> on a page can confuse screen readers and SEO crawlers.

Follow a Logical Heading Structure:

Ensure headings follow a proper hierarchy: <h1> for the main topic, followed by <h2>, <h3>, etc., in order. Don't jump from <h1> to <h3> or skip levels.
If using role='heading' and aria-level, the same hierarchy must be respected.

Be Descriptive:

Headings should clearly describe the content or section they refer to. Use them to provide context, not just as titles or visual cues.

Screen reader

  • Screen readers announce the heading level (e.g., "heading level 1," "heading level 2").
  • Users can navigate between headings using keyboard shortcuts.
  • Headings help screen reader users understand the hierarchical content structure.
  • Screen readers can generate a list of page headings for quick navigation. ARIA-based headings (role='heading' + aria-level) will also appear in this list if implemented correctly.

On this page