Skip to main content

Headings

Ready
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#

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#