Below are the basic headings with their associated renderings
<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.