Heading Hierarchy

A heading describes the content that follows it, much like a news headline. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen reader and other assistive technology users can also skip from heading to heading.

Headings create an outline for the page, similar to a term paper outline or table of contents. The <h1> describes the page as a whole (and should be similar to the page <title>). A page should typically have only one <h1>. Headings <h2> through <h6> represent increasing degrees of "indentation" in our conceptual "outline". As such, it does not make sense to skip heading levels, such as from <h2> to <h4>, going down the page. ∗∗Note: Accordion Item Blocks use <h2> Headings

Here is an example of content hierarchy with corresponding heading levels:

The Page name (Heading Hierarchy) is always the one and only <h1>

• H2: Quick and Easy

  • H3: Spaghetti

  • H3: Hamburgers

  • H3: Tacos

    • H4: Beef Tacos

    • H4: Chicken Tacos

    • H4: Fish Tacos

• H2: Some Assembly Required

  • H3: Tuna Casserole

  • H3: Lasagna

    • H4: Vegetable Lasagna

    • H4: Beef Lasagna

• H2: All-In

  • H3: Crab-Stuffed Filet Mignon with Whiskey Peppercorn Sauce

  • H3: Sun Dried Tomato and Pine Nut Stuffed Beef Tenderloin

Need Assistance?