Page Content

Many HTML tags were developed to provide information on the structural hierarchy of a document rather than providing formatting. In order to facilitate accessibility and Web standards, it is best to use the tags for their intended purpose in the information hierarchy, rather than for pure formatting purposes. In many cases, doing so will also make your document easier to edit.

Purpose of Headings

For documents longer than 3 or 4 paragraphs, headings and subheadings are an important usability and accessibility strategy to help readers both determine the overall outline of the document, and navigate to specific information on the page.

Heading Levels

Headings are classified into levels starting at Heading 1 and working through Heading 2, Heading 3, down to Heading 6. By general convention

  • Heading 1 (or "H1") is the page title
    Note: For sighted users, this is often formatted to be larger and/or a different color or centered depending on the editorial preferences. On this site, H1 is formatted to be dark cyan blue.
  • Heading 2 (or "H2") is a main topic.
  • Headings 3-6 (or "H3-H6") are lower levels of subtopics.

The lower the number, the smaller and more detailed a section likely is.

Headings: Semantic vs. Formatted

Sighted readers can identify heading by visually scanning pages for larger text. Blind users using screen reading software are not able to see the visual formatting, so increasing the font size is not a sufficient cue.

Instead, the headings must be semantically “tagged” so that a screen reader can both identify headings when reading a page, or pull up a list of all  page the page headings (see image below).

Voice Over rotor window showing list of headings for Accessibility Home page

The list of headings and heading levels for http://accessibility.psu.edu as shown in the VoiceOver screen reader.