Headings are vitally important when assisting in scanning and navigating your web page (see SSB Bart Group’s simulation of Web Headings for Screen Readers). They also help with search engine optimization (SEO), letting search engines know what topics your web page contains.
Headings do not stand alone; they introduce subject matter. Headings should not be used to make paragraphs stand out, as that makes the content unscannable by your constituents. They should be no longer than 140 characters.
Proper Semantic Usage
- Heading 1 (level 1 in heading hierarchy): A level 1 heading (the <h1> HTML tag) should be available somewhere at the top of your document. It typically defines the page’s primary topic.
- Heading 2 (level 2 in heading hierarchy): A level 2 heading (the <h2> HTML tag) must come after an <h1>. It can be in an aside section or further down on the document, depending on how you organize your content on your document. You can have multiple Heading 2’s as long as each one appropriately introduces a topic.
- Heading 3 – 6 (levels 3 – 6 in heading hierarchy): Level 3 through 6 headings (the <h3>, <h4>, <h5> and <h6> HTML tags) come after the previous levels ordinally. Again, you can have multiple headings of these different levels, but they must be relevantly and ordinally placed. Do not go out of order.
While it seems unavoidable when copying and pasting from various word processors and email clients, you will need to correct the semantics if you are placing the content on web documents.
The most common occurrence comes from bolded paragraphs. Word processors allow you to style and bold paragraphs to look like headings, but they are not semantically defined as headings when pasted into web documents. You must remove all the styling and bolding on the paragraph, and change the paragraph to one of the heading levels.
Guides and How-To’s
- Usability.gov’s Web Standards and Usability Guidelines
- Chapter 3: Accessibility
- Chapter 9: Headings, Titles, and Labels
- Chapter 11: Text Appearance
- Web Accessibility Initiative (WAI)
- Designing and Developing
- Web AIM
- WCAG 2.0 Guideline 1.3 – Adaptable
- Understanding WCAG 2.0 Guideline 1.3
- WCAG 2.0 Guideline 2.4 – Navigable
- Understanding WCAG 2.0 Guideline 2.4
- Techniques for WCAG 2.0 G115: Using semantic elements to mark up structure
- User Simulation: Through Eyes of a Screen Reader
- User Simulation: Carly’s Café – Experience Autism Through Carly’s Eyes
- The National Autistic Society Simulation: Autism and sensory sensitivity