Headings and Subheadings

Many tags in HTML were developed not to assist with formatting, but to provide information on the structural hierarchy of a document. In order to facilitate accessibility and Web standards, it is best to use the tags for the 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-4 paragraphs, headings and subheadings are important usability and accessibility strategy to help readers both determine the overall outline of the document and to navigate to specific information that may need more of the reader's attention.

Level of Headings

Headings are classified into levels starting at Level 1 and working through Level 2, Level and so forth. By general convention, the highest level is "Level 1" and often corresponds to the title of the page or major document section. Level 2 is the next set of subheaders with a Level 1 section, and Level 3 are sub-subheaders within a Level 2 section. The lower the number, the smaller and more detailed a section.

Top of Page

Headings: Semantic vs. Formatted

Visual readers are able to identify headers by scanning pages for text of a larger size or a different color/font face. Blind users on a screen reader are not able to see these visual changes, 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 and provide a list as a page or document table of contents (see image below).

This makes adding headings one of the most important tools for a screen reader user so that he or she can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.

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

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

See the list below for an example of how different tools add semantic headers to a document.

Examples of Heading Tags

  • Microsoft Word uses "Heading 1, Heading 2, Heading 3..." styles to add semantic headers. Formats for each can be adjusted in the Styles menu in Word.
  • HTML (Web pages) uses the H1, H2, H3...H6 tags as headers. Formats can be adjusted with CSS styles.
  • Web based editing tools (e.g. ANGEL's HTML Editor or Wikispaces) often include H1...H6 as options in a format or style menu.

To learn how to add headers in a specific document, please see the list of links in Related Links. In any case, what is most important is to avoid increasing font size or changing colors to indicate a section break.

Top of Page

WCAG 2.0 Guidelines

The following WCAG guidelines can be addressed with headers.

  • WCAG 2.0 Guideline 2.4.6—"Headings and labels describe topic or purpose."

Top of Page