Headings
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>
<h4>Diet</h4>
<h3>Trunks and Tusks</h3>
Example 1 – Do
<h1>All About Elephants</h1>
<h2>Habitat</h2> <!-- Doesn't skip -->
<p>Text here ...</p>
<h3>Diet</h3>
<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 -->
<h3>Diet</h3>
<h4>Range</h4>