Headings Make Content More Accessible
Good content organization makes information simple to find and easy to understand. Libraries shelve books in order so people can find the ones they need. Documents need to be just as organized so readers can find the information they need.
A good heading is short, meaningful, and located in the right place.
Headings Help With Navigation
Headings and subheadings break up the text in a document into manageable sections. Readers use the headings to navigate between topics and focus on the information they need.
For example, the headings on this web page allow the reader to skip the section on language and move directly to this section on organization.
Useful headings summarize the text's subject in just a few words.
GOOD EXAMPLE: PTSD Symptoms
BAD EXAMPLE: Stress is Bad For You
Headings Can Create a Content Outline
Headings and subheadings show how sections of a document fit together. Proper subheadings make complicated texts easier to read.
Nesting headings correctly is important.
Pay attention to heading levels to avoid confusion. If headings are not nested correctly, context and meaning will be lost.
GOOD EXAMPLE
- Stress
- Kinds of Stress
- Physical
- Emotional
- Mental
- Causes of Stress
- PTSD
- Family
- Work
- Kinds of Stress
BAD EXAMPLE
- Stress
- Kinds
- Physical
- Emotional
- Mental
- Causes
- PTSD
- Family
- Work
Heading Levels Clarify Content Structure
Hierarchy of ideas and page structure is best indicated by nested subheadings. Accessibility standards also requires that the subheadings be marked with the correct <h#> tags in HTML. The combination of visual hierarchy and coded heading tags ensure that the content is fully accessible.
GOOD EXAMPLE
- Page Title <h1>
-
- Heading Level 2 <h2>
-
- Heading Level 3 <h3>
-
- Heading Level 4 <h4>
- Heading Level 3 <h3>
- Heading Level 2 <h2>
-
- Heading Level 3 <h3>
BAD EXAMPLE
- Page Title <h1>
-
- Heading Level 2
-
- Heading Level 3
- Heading Level 4
- Heading Level 3
- Heading Level 2
-
- Heading Level 3
Note: Indented levels and italics in examples above are just for illustration. Headings on a web page are not actually indented, nor are they italicized.