Headings

Below are the basic headings with their associated renderings

Heading styles

<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