When a web resource is graphically rendered, the text and layout are styled to visually structure the information presented by the web resource, making it easier for sighted users to identify logical units of information, headings, and sub-headings. Representation of such structure in HTML markup using sub-headings (
h2-h6) is important in facilitating navigation of people who use assistive technologies such as refreshable Braille displays. Without headings, web resources appear as one long paragraph to screen reader users. Consequently, locating and understanding information is difficult.
Benefits to People with Disabilities
- Keyboard users, including people with physical disabilities and screen reader users, can use keyboard heading navigation commands to efficiently navigate the content of web resources.
- Screen reader users can easily locate and identify the main sections and sub sections of web resources.
Benefits to Everyone
- Web resources are more usable when the styling of headers is consistent. Identifying headers on web resources also becomes easier.
- Users recieve better search results for web resources since search engines value heading content more than paragraph content.
- Using headings structures web resources for more accessibility for users with a wider range of technologies.
Benefits to Developers
- It is easier to style headings consistently across web resources using CSS.
- As web developers separate structure from styling, creating and updating resources becomes easier.
- The ranking of a web resource improves when its heading content provides meaningful information about the content of the web resource, because search engines value heading content more than paragraph content.
- 15: Marking up textual content in HTML – Page section headings (Opera Web Standards Curriculum)
h2-h6elements provide information on the major and minor groups of information on a web page.
- The headings should be used structurally and be properly nested.
- Developers should think of headings as providing an outline or table of contens for the information on each web page.