Usage

  • Headings are not just larger text
  • Headings must be logically ordered.
  • Arrow keys will browse headings (not the tab key)
  • Headings must not receive focus

Annotations for headings

  • Start with a single <h1> per page (typically the same as the <title>)
    • Title major sections with <h2>
      • Subsections with <h3>
        • It should be rare that <h4> and beyond is required.

Applying styles to code

  • Divorce styles and token names from markup completely
  • Directly styling headings forces heading order to lose meaning
h1 {
  font-size: 32px;
}
  • While this seems better, it really isn’t.
  • Even though class="h1" could be applied to any element, developers WILL interpret this as <h1 class="h1">
.h1 {
  font-size: 32px;
}

Good example

  • Set all headings to a small default to force devs to seek correct styles
  • Choose naming conventions without implied semantics
h1, h2, h3, h4, h5, h6 {
  font-size: 16px;
  font-weight: normal;
}

.text-display-huge {
  font-size: 48px;
}

.text-display-large {
  font-size: 32px;
}

.text-display-medium {
  font-size: 24px;
}

.text-display-default {
  font-size: 16px;
}
  • Styles are now separated from markup
  • This allows the preservation of good heading structure and flexibility in design
<h1 class="text-display-medium">
  Shop
</h1>

<h2 class="text-display-huge">
  Our biggest coffee sale of the year
</h2>

<h3 class="text-display-large">
  Light roast liquidations
</h3>

<h3 class="text-display-large">
  Medium roast markdowns
</h3>

<h3 class="text-display-large">
  Dark roast deals
</h3>

Complex headings

  • When multiple styles exist inside a heading use spans and css styles to achieve the desired result
<h1>
  <span class="brand">Apple</span> 
  <span class="model">iPhone XVI</span> 
</h1>

Related heading: h1, h2, h3 entries