Web Accessibility: Headings & Semantic Structure
This guide is designed to give you a quick overview about creating web pages and documents with appropriately-nested heading structure.
Headings create hierarchical structure in web pages and documents. Heading levels include h1, h2, h3, h4, and sometimes h5 and h6. Headings “chunk” content into sections based on importance. All heading levels can contain all types of content including paragraphs of text, hyperlinks, lists, images, embedded videos, tables, etc. Headings improve access for people with disabilities, but they also improve usability for everyone.
Accessibility
People who are blind or have low-vision use assistive technology (AT) like JAWS to read the contents of their computer screen. Without headings, documents and web pages are not accessible to AT users because they cannot effectively interpret and interact with the content.
Universal Design
Good headings also create clear visual organization and help everyone better scan and navigate text-based content. Good headings are an example of Universal Design.
Heading Level Overview
Note: Headings are indented here to illustrate different levels. When authoring content, heading levels do not need to be indented unless otherwise specified by a style guide.
H1
H1 is the most important section, usually reserved for the title of the page. Depending on the type of document, you may have more than one H1 per doc and/or web page.
H2
H2 is a major section and it’s nested under H1. H2 must follow H1, but H2 can also follow H2.
Note: Some platforms like Canvas start with H2 because the page title is tagged as H1 by default.
H3
H3 is a subsection of H2. H3 must follow H2. H3 can follow another H3, but avoid skipping from H1 to H3.
H4
H4 is a minor section. H4 must follow H3. H4 can follow H4.
Example of Improper Nesting
H2
This is a major section.
H4
This minor section is nested in the incorrect order. The H3 subsection is missing between H2 and H4.