Headings

Headings communicate the organization of the content on the page. Search engines use them to index the content of web pages. Users skim web pages by headings. Web browsers, plug-ins, and assistive technologies can use headings to provide in-page navigation.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Usage Notes

• Don’t use headings to make text big or bold. Follow the Semantic HTML guidelines.

• Don’t use lower levels to decrease heading font sizes.

• Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

• Avoid using <h1> more than once on a page.

Examples

The following code shows all the heading levels in use.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Reference

• Web Accessibility Tutorials: Headings from the Web Accessibility Initiative.

• Headings and Why You Should Use Them by Yoast.