Titles and headings

Think of headings as a content outline for your document or webpage. They create a hierarchical structure that helps organize the main points, and give assistive technology users landmarks to help navigate through the content. Heading structure for a webpage about Bucky Badger might look like this:

• Bucky Badger
  • History
  • Variations
    • Mascot
    • Logo

Heading levels should be applied in order of their rank, or level. The top of the hierarchy should be a heading level one (h1). Subsequent headings should be nested by their rank from h2 to h6. The headings for the Bucky Badger webpage would be ranked as the following:

• (h1) Bucky Badger
  • (h2) History
  • (h2) Variations
    • (h3) Mascot
    • (h3) Logo

Only use one h1 heading for the title of a document or webpage. There are limited exceptions for documents that contain more than one title, such as an academic journal with multiple written pieces. 

Skipping heading levels can cause confusion — for example, following an h2 with an h4 — and should be avoided. 

Assistive technologies like screen readers generally don’t convey visual styling like bold text, color, or larger font sizes. This is why it’s important to use a heading style to introduce each new content section — do not rely on visual text emphasis alone to create document structure. You can modify the appearance of default heading styles if you’d like to change their font, size, or color. 

There is no limit to the number of headings you may have in a document or webpage. Longer documents and webpages typically have more headings because they contain more information, and chunking content into sections makes it easier for people to read and find what they need.

• Add a unique title to your website or document that matches the content of the page
• Use one h1 level heading for the title of a document or webpage
• Use headings in order from h1 through h6 without skipping levels