Heading Tags
ISSUE:
Clarity and simplicity aid usability for all, while enhancing the correct and meaningful interpretation of the page by users with visual or cognitive impairments. Although titles and headings may be visually distinct, the proper use of heading tags is essential for users of some adaptive technology.
Heading tags should be used to convey structural information about an HTML document indicating main points and sub-points on a page. Heading levels range from level 1 (Most Important) to level 6 (Least Important). Like an outline, heading levels should appear in logical and consistent order.
Unfortunately, heading tags are often used incorrectly to manipulate font size. Although each subsequent lower-level heading tag displays text in a progressively smaller font size, heading tags were never intended as a means of controling font size. Using heading tags to manipulate the font size for an entire paragraph will cause screen-readers to announce the heading level each time a line-wrap/break is encountered, making the information difficult to understand.
The font size at any given heading level depends on the browser and settings being used. The font size and other attributes for any heading level can be controled using style sheets.
STANDARD:
- Heading tags shall be used to convey structural information about an HTML document.
- Heading tags shall not be used to manipulate font size or other text attributes.
Example:
| <h3>This is a level 3 heading</h3> | This is a level 3 heading |
| <h3 style="font-size: 1.2em; font-family: times new roman">This is a level 3 heading</h3> | This is a level 3 heading |
| <h3 style="font-size: 0.8em; color: green; font-weight: normal">This is a level 3 heading</h3> | This is a level 3 heading |