Skip to main content

Headings

Headings represent the key concepts, ideas and supporting ideas in the content of a webpage.

It is important to use headings to show convey webpage structure to search engines and users. <h1> headings should be used for first, followed by <h2> headings, then <h3>, and so on to <h6>.

Examples​

Default​

This is a Heading 1 example

This is a Heading 2 example

This is a Heading 3 example

This is a Heading 4 example

This is a Heading 5 example
This is a Heading 6 example
<h1 class="bux-h1">This is a Heading 1 example</h1>
<h2 class="bux-h2">This is a Heading 2 example</h2>
<h3 class="bux-h3">This is a Heading 3 example</h3>
<h4 class="bux-h4">This is a Heading 4 example</h4>
<h5 class="bux-h5">This is a Heading 5 example</h5>
<h6 class="bux-h6">This is a Heading 6 example</h6>

Alternate H1​

Use this in situations where a serif font may not be appropriate.

This is an alternate h1

<h1 class="bux-h1--alt">This is an alternate h1</h1>

Alternate H2​

Use the Alternate H2 style when an H2 heading is required for semantic structure, but the default font size is too large for the page layout. For example, search results may need to be marked as H2 for accessibility or hierarchy, but displayed with a smaller font size—similar to the implementation shown on this page.

This is an alternate h2

<h2 class="bux-h2--alt">This is an alternate h2</h2>

Usage​

Dos​

  • Use headings to show text structure. Headings give users a sense of the page’s organization and structure and are ranked <h1> through <h6>
  • All pages should have one <h1> level heading
  • On the homepage, the <h1> should be the website title
  • On interior pages, the <h1> should be the page title
  • Make sure the headings are used hierarchically and no levels are skipped
  • Write brief, but descriptive headings to give users an outline of the content on the page

Don'ts​

  • Don't use the headings out of order or based on their appearance
  • Don't use bold text in place of a heading
  • Don't add styling, such as bold, to a heading
  • Don't choose a heading that is not part of the hierarchy of the page when you want text to be larger or stand out
    • Instead use HTML and CSS to change the size of the text

Accessibility​

  • If the underlying code for a pages’ headings is correct, screen reader users 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
  • Using headings and making them visually distinctive is helpful for users with cognitive disabilities
  • The usefulness of proper heading structures is very high, with 85.7% of respondents from the 2021 WebAIM Screen Reader Survey finding heading levels very or somewhat useful

References​

Back to top