Logical HTML Heading Tags

Logical page structure is important for both Search Engine Optimization (SEO) and accessibility compliance. Using HTML heading tags properly is one method to ensure our pages communicate the content of a page in an organized and accessible way.

Headings are the short phrases or words that are used to communicate the purpose of a page, or a section of a page.

When a user visits your site with the aid of a screen reader or when Google crawls your site and indexes your content, HTML heading tags will communicate your page's purpose and content. Headings are especially important for users with screen readers, such as VoiceOver, since the Web Rotor assistant will list out the page's headings for easy navigation.

HTML heading tags best practices

You should avoid using text styling, such as bold or underlined text, to create the sections of your pages. HTML heading tags should be used to separate your content into meaningful sections, with H1 noting the title of the page and H2-H6 sub-headings noting the other sections of the page from most to least importance.

Heading tags with an equal or higher rank should start a new section, and heading tags with a lower rank should start the new sub-sections within those higher sections. It is also important not to skip ranks; for example, do not use an H5 directly after an H1.

For example:

H1 - Nuts and Bolts of Accessibility 

H2 - What is WCAG 2.0

H3 - First Subsection

H4 - Subsection

H3 - Second Subsection

H2 - Getting Started

Quick tips for logical heading tags

• Headings should be as concise and short as possible.

• H1 heading tags should only be used once per page.

• Make sure you use header 2 (H2) for the major sections of the page.

• Do not use headings to achieve a particular visual appearance. If you want to highlight or emphasize content, use bold, italicized, or underlined text.

• Too many headings can make the page difficult to navigate. If you find the page is long, look for ways to break it up into separate pages.

• Use headings to add white space to your page by breaking up content into sections. Users with cognitive impairments or low vision will find the white space helpful in understanding the content.

Using H1 heading tags in Composer page settings

You can add an H1 tag to your page by toggling on the "Page Name" field under Page Settings. The "Page Name" field titles your navigation and the page; for example, the page name "Athletics" will be applied to both the navigation and the H1 page title.

Using HTML heading tags in the editor

If you would like your heading to have a different phrase than the navigation name, then you can add in the heading tag with the editor. At the top of your new page in the first Content element, click into the content and select the "Formatting" icon (pilcrow). In this dropdown you will find the heading tags H1-H6.

Adding in H2 Headings with the element title toggle

The title of each element in Composer is an H2 heading, so you can also use an element's title to ensure that each section of your page has an H2 heading. When you add an element, such as a Content element or a Calendar element, be sure to input your H2 language in the "Title" field and toggle the element title on.