Heading Tags (H1, H2, H3, P) in HTML

Many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as 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, this will make your document easier to edit as well.

Synopsis

  1. Use the H1, H2,...H6 tags as indicators of section headings and subheadings within a document, not just as formatting elements. Screen readers in particular may just scan a page for appropriate H1, H2 and H3 elements. See Header examples below.

  2. Many experts recommend reserving H1 for the page title, H2 for major headings and H3 for major sub headings.

  3. If you need to indent text for a quote it is generally preferable to use the BLOCKQUOTE tag rather than a UL unordered list tag. The UL tag should be reserved for true lists containing LI elements.

  4. If you need to indent text stylistically (e.g. indent all paragraphs), it is better to use a CSS specification and add space to the left margin (e.g. {margin-left: 15px}) or left padding.

  5. Use the P paragraph tag to separate paragraphs instead of multiple breaks (e.g. BR BR ). This encloses blocks of text within their own structural elements. Some screen readers are able to jump from P to P but not BR to BR.

  6. Do not use the FONT tags to adjust formatting of heading tags. Experts recommend using cascading style sheets for specifying font color, font-size, font-face and backgrounds (versus the FONT tag). This allows a user with color vision or low vision to override a problematic stylesheet with one that they prefer.

  7. In Word, using the Heading 1, Heading 2 styles performs a similar function as H1, H2 do and may be converted to approproate H tags in different conversion tools. You can edit Word Styles to change the appearance of these headers.

Heading Tag Examples

Tagging Content Headers Appropriately

Use the H tags to mark document headers instead of changing FONT sizes.

Inaccessible Use of < font size > tag for headers

In this example, the <font size="+1" color="#000066" (navy) > and <b > tags have been used to create large sub headings.

Topic 1

Content

Topic 2

Content

A screen reader set to a scanning mode would not list these as topics. In addition the code contains more formatting tags than needed.

View the Code

<p> <font size="+1" color="#000066"> <b> Topic 1 </b> </font> </p>

 

Accessible Use of H2 tag for headers

In this example the H2 tag has been used and has been styled so that it is automatically navy.

Topic 1 (example)

Content

Topic 2 (example)

Content

A screen reader set to a scanning mode would list "Topic 1" then "Topic 2"

View the Code


h2 {color: #000066}
...
<body>
<h2> Topic 1 </h2>

Tagging Large Sizes Appropriately

Do not use the H tags just to format text to a larger size.

Inaccessible use of H1 tag

In this example, the H1 tag is used to increase font size in the table cells. The screen reader in scanning mode will could read all the H1 cells out of context. In this case you could use CSS to ensure that the TH table header cells are styled with larger text.

Summary of Jedi Knight Staff Review
  Vader Luke Obi-Wan
Overall Grade C– A A+
Summary Strong technical skills, but too quick to use them in an aggressive manner. Counseling on family issues may be needed. Technical skills still weak, but has excellent communication and relationship skills. May need to develop assertiveness. Strongly improved management and mentoring skills. Has clearly learned much from previous mistakes.

A screen reader scanning H1 tags would read Vader, Luke, Obi-Wan, Overall Grade, Summary

Top of Page