Headings

Below are the basic headings with their associated renderings


Heading styles

Heading 1

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 class="aligned-title">
  Heading 1
</h1>
<h1>
  Heading 1
</h1>
<h2>
  Heading 2
</h2>
<h3>
  Heading 3
</h3>
<h4>
  Heading 4
</h4>
<h5>
  Heading 5
</h5>
<h6>
  Heading 6
</h6>
      

Why Headings are Important

  • Headings give semantic and visual structure to web and print documents.
  • Sighted users scan for big, bold text in order to get an idea of the structure and content of web pages.
  • 57% of screen reader users use headings to navigate the page, whereas only 8.5% read through the contents of page.
  • If headings are not included in the page, screen reader users are forced to listen to the entire contents of the page.

Guidelines for Usage

  • Headings should be short and concise.
  • Headings should only be used when followed by content.
  • By reading the headings alone users should get a good idea of the page contents.
  • Headings should be mainly used for page specific content, rather than content which appears on every page.
  • Heading tags should not be used to change font size or add emphasis.
  • Appearance and presentation of text should be controlled via CSS rather than heading tags.
  • Heading levels can't be skipped i.e. you can't jump from h1 to h3.
  • The contents of the h1 tag is of moderate importance to search engines.
  • Keywords in h2 - h6 tags are of low importance to search engines, but are of key importance to screen reader users.

References

WCAG 2.0 Technique H42 - Using h1-h6 to identify headings