Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Headings

Introduction

Use HTML headings<h1> ,<h2> ,<h3> ,<h4> ,<h5> and<h6> properly.

Headings are hierarchical:<h1> is the most important, then<h2> , through to<h6> being the least important. Use one<h1> per page.

Headings at the same level or higher start a new section, whilst headings at a lower level start a subsection. Don't skip heading levels.

If the styling of a heading doesn't look right visually, for example too big or bold, style it with CSS but always use the correct semantic heading.

The text for a heading should be descriptive, meaningful and unique on the page.

When it goes wrong

When semantic HTML elements for headings aren't used, the page has no structure or definition available to assistive technologies.

Headings provide navigation landmarks, which assistive technologies can navigate over to find the area they want on the page.

Screen readers can navigate and jump to a heading, in the same way as a sighted user would scan for the heading they need.


Last reviewed 18 April 2024 .
Navigated to Headings - Intelligence Community Design System