The rule
Use a logical heading structure to create a clear content outline.
Why it matters
Screen reader users often scan pages by jumping between headings to find information quickly. If headings are missing or out of order, these users lose the ability to navigate efficiently and may find the content confusing.
How to apply it
- Use only one H1 tag per page for the main title.
- Organize subtopics with H2 through H6 tags in a descending, hierarchical order.
- Do not skip heading levels (e.g., jumping from H2 to H4).
- Use headings to break up long sections of text.
Example
Before and after
Avoid
Using bold text for section titles without proper HTML tags.
Better
Using an H2 tag for section titles to mark them as landmarks.
Tensions and exceptions
Visual designers may want to skip heading levels to achieve a specific look. In these cases, you must use CSS to adjust the font size while maintaining the correct numerical order in the code.