Headings

Proper use of Headings

The first level of structure to add to a page is headings. Headings are used to break up the content into a hierarchical structure much like an outline. Where sighted users can skim a page quickly by reading the visual headlines, a screen reader user can also skim a page by quickly traversing the headings. To semantically define headings simply use heading tags to label the beginning of each section.

Use Headings to Define the Page Structure

This both creates a semantic structure for your page and it allows screen reader users to be able to navigate by heading and jump from section to section.

<h1>Our News Site</h1>
  <h2>World News</h2>
  <h2>National News</h2>
    <h3>Hot Topics</h3>
    <h3>Politics</h3>
  <h2>Science</h2>
    <h3>Health</h3>
    <h3>Environment</h3>
    <h3>Technology</h3>
  <h2>Entertainment</h2>

Use CSS to style the headings

If you don’t like the way the default heading look, and most of us don’t, just use CSS to style the headings.

<style>
  h1 {font-size:1.4em; font-weight:bold; color:#000;}
  h2 {font-size:1.2em; font-weight:bold; color:#222;}
  h3 {font-size:1em; font-weight:bold; color:#444;}
</style>

<h1>Our News Site</h1>
  <h2>World News</h2>
  <h2>National News</h2>
    <h3>Hot Topics</h3>
    <h3>Politics</h3>
  <h2>Science</h2>
    <h3>Health</h3>
    <h3>Environment</h3>
    <h3>Technology</h3>
  <h2>Entertainment</h2>

General Rules for Applying Headings

  • Your <h1> should be where the unique main content of your page begins, which usually means it will come after your navigation system (usually page titles or main content headings).
  • You should have only 1 <h1> per page.
  • Do not skip heading levels.  (i.e. do not go from an <h2> to an <h4>, headings should be in order).
  • Headings are structural elements, so do not pick a heading level simply for font sizing purposes. Pick a level that corresponds to the outline of the page.
  • Do not use visual styling as the only way to communicate what your headings are, rather use actual headings<h1> – <h6>.
Previous
Next