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.

Code examples

<h1>My favorite taco recipe</h1>
  <!-- Author's entire life story 
   as it relates to tacos -->

  <h2>Ingredients</h2>
  <!-- List of ingredients -->

  <h2>Steps</h2>

    <h3>Preparing the protein</h3>
    <!-- List of instructions -->

    <h3>Preparing the vegetables</h3>
    <!-- List of instructions -->
    
    <h3>Assembly and plating</h3>
    <!-- List of instructions -->
  
  <h2>Nutrition information</h2>
  <!-- List of nutrition info -->
  
  <h2>Related receipes</h2>
  <!-- List of related recipes -->

Complex headings

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

Related heading: h1, h2, h3 entries