Skip to main content

Headings

Headings structure page content, creating a clear outline that improves navigation and comprehension for all users, particularly those using screen readers.

For more information, see the Headings Guidance page.

HTML Heading Best Practices

  • Maintain a Logical Hierarchy: Begin with a single <h1> for the page title. Use <h2> for major sections, <h3> for subsections, and so on, nesting them in a logical order.
  • Do Not Skip Levels: Avoid skipping heading levels when descending (e.g., do not follow an <h2> with an <h4>). This maintains a coherent document structure for assistive technologies. Ascending to a higher heading level (e.g., from <h4> to <h2>) to start a new section is acceptable.
  • Use Headings for Structure, Not Style: Select heading tags based on their semantic level, not their appearance. Use CSS to control all visual styling, rather than styling a paragraph to look like a heading.

Styling Headings with CSS

CSS provides full control over the visual presentation of headings, separate from their structural level. This allows you to meet specific design requirements without compromising the semantic hierarchy.

For example, you can style an h3 to appear visually identical to an h2 while preserving its correct structural role for assistive technologies.

<style>
   h3 {font-size: 1.5em; }
   h2, .h3alt { font-size: 2em; }
</style>

<h2>This h2 will look the same...</h2>
<h3 class="h3alt">...as this h3</h3>
<h3>But this will be smaller</h3>

Headings in a CMS

In a Content Management System (CMS) like Drupal or WordPress, apply headings using the rich text editor's built-in heading menu. Adhere to the same hierarchical best practices previously outlined.

Note that the <h1> tag is often reserved by the website template and may not be an available option in the editor.

Styles dropdown from the Drupal CMS showing the heading styles

Misuse of Headings for Emphasis

Do not use heading tags solely for visual emphasis. Headings must define the document's structural outline, not just style text. Using a heading for emphasis creates a misleading and non-semantic page structure.

For highlighting content, use appropriate tags like <strong> or <em>, or apply styling with CSS.

Incorrect Example: An <h3> is incorrectly used here to emphasize an announcement, creating a false structural level.

<h2>Office Hours</h2>
<h3>The Offices of Undergraduate Admission... will close early...</h3>

Correct Implementation: The announcement is placed in a paragraph, and <strong> is used to convey importance without disrupting the document's heading hierarchy.

<h2>Office Hours</h2>
<p><strong>The Offices of Undergraduate Admission... will close early...</strong></p>

Implicit Headings

An implicit heading is a non-semantic element, such as a paragraph (<p>), styled to visually resemble a heading. While it may look correct, it is not programmatically identified as a heading and provides no structural value.

This practice is detrimental to accessibility because users of assistive technology rely on a proper heading structure to navigate and understand page content.

Example of an Incorrect Implementation: This <p> tag is styled to look like a heading but is ignored by assistive technology.

<p style="font-weight: bold; font-size: 120%;>Section Title</p>
<p>This is the content of the section.</p>

Always use true heading elements (<h1>-<h6>) to define the structure of your content.

ARIA Headings

In situations where native HTML headings (<h1>-<h6>) cannot be used—typically when remediating legacy code—ARIA can programmatically create a heading from a non-semantic element like a <div>.

This requires two attributes:

  • role="heading": Identifies the element as a heading.
  • aria-level="[number]": Specifies the heading level (e.g., "2" for <h2>).

Example:

<div role="heading" aria-level="2">This functions as an H2</div>

Important Restriction: This technique is exclusively for converting non-heading elements. Never use aria-level to change the semantic level of a native heading tag. This is invalid and will be ignored or misinterpreted by browsers and assistive technologies.

Invalid Example:

<h2 role="heading" aria-level="3">This is not allowed</h2>
Last modified