Headings
Designing with headings
Web page headings help users identify different sections within the content. Headings are visually larger and more distinct than the surrounding text and provide an outline of the page structure.
Sighted users can skim through the page by reading the headings. Screen reader users can use headings to navigate to different sections quickly. Users with cognitive disabilities can understand the structure and find content more easily. It is important to mark up headings semantically so that everyone benefits.
Follow these best practices for headings:
- Provide headings for each page
- Use heading elements
<h1>-<h6>for all headings - Don’t use heading elements for text that is not a heading. Instead, use CSS to change font size or styles
- Ensure headings are meaningful, concise and describe the topic or purpose
- Ensure headings follow a hierarchical sequence without skipping any levels
- Provide one h1 heading that describes the page content
Good example: Heading hierarchy
Example of descriptive headings following a hierarchy without skipping a level:
HTML
Code begins
<h1>Web Accessibility Fundamentals</h1>
<h2>What is Web Accessibility?</h2>
<h2>Types of Disabilities</h2>
<h3>Blind</h3>
<h2>Accessibility Guidelines<h2>
<h3>Web Content Accessibility Guidelines</h3>
Code ends