Identify headings using H1 to H6 elements
no. 007
Make sure the structure of headings is marked up using H1 to H6 tags
Headings help users understand the structure of the content and how sections are nested in one another. When presented efficiently, headings help users figure out the organization of the content, allowing them to navigate by blocks, rather than as a whole. While this organization can be achieved on the presentation layer using CSS, real HTML heading tags need to be used for the headings to truly convey the semantics required to create a document outline.
To do this, simply analyze which elements of content play a heading role. Identify these elements and assign them a hierarchy level, based on intended structure: first-level heading, second-level heading, third-level heading and so on. Then assign each of these heading the corresponding H1, h2, H3, H4, H5 or H6 tags in order to create an outline for the document. Assistive technologies will then be able to reliably transform the semantics into an outline for end users, allowing them to quickly go from one section to the next.
User Story
As a user using assistive technology such as screen readers, I want headings in a web [...]