This is heading h1 used for the title of the page.
This is heading h2 used for the page “Subtitle”. It lives in the “Intro” tab of the CMS.
This is heading h2 that’s used as the “Heading” for all the content below. It lives in the “Intro” tab of the CMS.
This is the lead paragraph. It lives in the “Intro” tab of the CMS.
This is the intro paragraph. It lives in the “Intro” tab of the CMS.
Heading Examples
All content below the horizontal line above exists within “Text” modules under the “Content” tab of the CMS. Below is a screenshot that shows how you can apply heading styles within a “Text” module.
This is heading h3.
This is how a normal paragraph looks under heading h3.
This is heading h4.
This is how a normal paragraph looks under heading h4.
This is heading h5.
This is how a normal paragraph looks under heading h5.
This is heading h6.
This is how a normal paragraph looks under heading h6.
Benefits of Headings
Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually apparent is especially helpful for users with cognitive disabilities.
If the underlying code for a pages headings is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to a desired heading to begin reading at that point. Screen reader users can use headings to skip the repeated blocks of content like headers, menus, and sidebars, for example.
In 2017, WebAIM asked how screen reader users preferred to find information on lengthy web pages. Almost 70% of respondents said they preferred to use headings on a page. Clearly, organizing pages using headings is one of the best accessibility strategies available.
Using Headings
Headings are ranked <h1> through <h6>. Use headings hierarchically, with the <h1> representing the most important idea on the page, and sub-sections organized with <h2> level headings. Those sub-sections can themselves be divided with <h3> level headings, and so on.
It is best to plan out a heading structure before composing a page. Doing so will help you both select appropriate heading levels and keep your thoughts organized overall.
All pages should at least have a <h1> level heading giving the title of the page.
Skipping heading ranks can be confusing and should be avoided where possible (for example, try to avoid skipping from <h2> to <h5>). It is ok to skip headings in the other direction if the outline of the page calls for it (for example, from <h5> 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.