Organizing page content by headings can help users understand a page’s organization and structure. Visually, headings are presented as larger and more distinct than “body” text. Making text larger helps guide the user’s attention. Using headings is particularly helpful for users with cognitive disabilities.
Just as important, properly formatted headings help screen reader users find content quickly. It is common for screen reader users to navigate a page by hopping from heading to heading or hearing an inventory of all headings and skipping to a desired one.
What is a Heading?
From a technical perspective, a valid heading is one of six HTML tags: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. The numbers indicate the heading’s order in the page hierarchy. <h1> should always be the top-level heading — usually the page title — and subsequent headings should sequentially decrease in level.
As content creator, you can simply select the appropriate heading from the “Format” list in the page editor. (Learn more about using formats and the content editor.)
- All pages should have one (and only one) <h1> heading. The <h1> should clearly indicate the purpose of the page. Williams’ templates place the page title into the <h1> tag, so content creators don’t need to add the <h1> manually. It is important, however, to give the page a clear, helpful title.
- Heading levels should descend sequentially. Avoid skipping heading levels (for example, do not skip from <h2> to <h5>). It is permissible to skip headings in the other direction if the outline of the page calls for it (for example, from <h4> back to <h2>).
- Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.
- Do not use bold instead of a heading. One of the most common accessibility mistakes is making text bold when a heading is needed. Though the text may look like a heading, the underlying code is not set correctly, and screen reader users will not benefit.
- Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank. Only for exceptionally long or complex pages would <h5> and <h6> be necessary.