Skip to main content

What are headings?

Headings provide easy visual navigation and consistency by breaking content into manageable chunks or sections. They also give semantic meaning to web content, which helps users with disabilities especially those using assistive technology.

On websites, there are six levels of headings from heading 1, <h1>, to heading 6, <h6>. While you can style headings to look larger and bolder, you must remember their main purpose. Like your website’s navigation, headings make your page content navigable. Think of your heading layout like an outline of the page’s content.

How to Use Headings

Use headings to break the content on your page into manageable chunks. Headings break into:

  • Major sections (heading 1, <h1>, used only once to title the page)
  • Sections (heading 2, <h2>)
  • Sub-sections (heading 3, <h3>, heading 4, <h4>, etc.)

Search engines like Google will display accessible websites higher in their search results. This includes websites with one heading 1, <h1>, as the title for each the page. You can repeat heading 2, <h2>, heading 3, <h3>, and so on as needed depending on the layout of the content on the page.

Most web text editors like WordPress and Sakai have built-in heading options. Each web page should have one heading 1, <h1>, usually appearing as the page title. Following headings go in order from heading 2, <h2>, to heading 6, <h6>, as needed for the page’s content.

Impact on Users

Headings make content easier to read and skim especially on a digital screen. They also makes the content easier for screen reader users to navigate. See a screen reader demonstrated by Marc Sutton at University of California San Francisco.

HTML Examples

Example 1 – Don’t

<h1>All About Elephants</h1>
<h3>Habitat</h3> <!-- Skips a level -->
<p>Text here ...</p>
<h3>Trunks and Tusks</h3>

Example 1 – Do

<h1>All About Elephants</h1>
<h2>Habitat</h2> <!-- Doesn't skip -->
<p>Text here ...</p>
<h2>Trunks and Tusks</h2>

Example 2 – Don’t

<p style="font-size: 200%;">Habitat</p> <!-- Uses styled text -->
<p style="font-size: 150%;">Diet</p>
<p style="font-size: 125%;">Range</p>

Example 2 – Do

<h2>Habitat</h2> <!-- Uses headings -->