Subheading Overview

Overview

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

  1. 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.
  2. Screen reader users can easily locate and identify the main sections and sub sections of web resources.

Benefits to All Users

  1. Web resources are more usable when the styling of headers is consistent. Identifying headers on web resources also becomes easier.
  2. Users recieve better search results for web resources since search engines value heading content more than paragraph content.
  3. Using headings structures web resources for more accessibility for users with a wider range of technologies.

Benefits to Developers

  1. It is easier to style headings consistently across web resources using CSS.
  2. As web developers separate structure from styling, creating and updating resources becomes easier.
  3. 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.

Related Resources

  1. 15: Marking up textual content in HTML - Page section headings (Opera Web Standards Curriculum)

HTML Markup Details

h2-h6 elements
The h2-h6 elements should identify major and minor sections of the web resource.
Headings should be properly nested following the heading levels represented by the numerical values of the heading elements.
  • h2 should be used as sub-heading after a h1
  • h3 should be used as sub-heading after a h2
  • h4 should be used as sub-heading after a h3
  • h5 should be used as sub-heading after a h4
  • h6 should be used as sub-heading after a h5

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
1.3 Provide meaningful page titles.
1.4 Use headings to introduce sections and sub-sections, and use them in the correct order.
9.2 Provide a means of skipping past repetitive navigation links.
Section 508
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
W3C Web Content Accessibility Guidelines 2.0
2.4.1 Bypass Blocks
2.4.2 Page Titled
2.4.8 Location
2.4.10 Section Headings
3.2.3 Consistent Navigation
3.2.4 Consistent Identification
W3C Web Content Accessibility Guidelines 1.0
3.1 When an appropriate markup language exists, use markup rather than images to convey information.
3.3 Use style sheets to control layout and presentation.
3.5 Use header elements to convey document structure and use them according to specification.
12.3 Divide large blocks of information into more manageable groups where natural and appropriate.
13.4 Use navigation mechanisms in a consistent manner.