Structure a page with headings (H1, H2, H3)

  • seo
  • headings
  • h1
  • accessibility
  • page-editing

Updated

Headings work like the outline of a page. Readers skim them to find what they need, screen reader users jump between them, and search engines use them to understand what each part of the page is about.

Each heading has a level from H1 to H6. The level describes where the heading sits in the outline, not how big it looks.

Which heading level should I use?

Level Use it for Example
H1 The page title. One per page, at the top. Wedding Photography in Madison
H2 The main sections of the page. Packages, How it works, Frequently asked questions
H3 Topics within an H2 section. Half-day package, Full-day package
H4–H6 Further detail inside an H3. Most pages never need them.

Then follow two rules:

  • Use one H1 that says what the page is about, in words a visitor would recognize. See Add a page title (H1) to every page for adding it on a Dirigible page.
  • Don't skip levels on the way down. An H2 section's subheadings are H3s, not H4s. You can jump back up from an H3 to the next H2 at any time.

How do I write good headings?

  • Say what the section covers. "Our three packages" tells more than "Options."
  • Use the words your visitors would search for, where they fit naturally. Don't repeat a keyword in every heading.
  • Keep them short enough to scan.
  • Don't use a heading just to make text bigger or bolder. If it isn't the title of a section, use a paragraph and style it instead.

How do I make a heading look smaller without changing its level?

Sometimes a heading in the right place in the outline looks too large or too small for the design. Keep the level and change only its look.

On a Dirigible site, select a Heading block and open its styles in the block sidebar. The Mimic <h1> to Mimic <h6> styles make the heading look like another level while it keeps its own. For example, an H2 set to Mimic <h4> looks like an H4 but still counts as an H2 in the outline. The Post Title block has the same styles.

Many Dirigible blocks work the same way: a Headline Style setting in the sidebar changes how the block's headline looks without changing its level.

Check before you publish

  • One H1, at the top of the page.
  • Each main section starts with an H2.
  • Subsections use H3, then H4, without skipping a level.
  • Every heading describes the section below it.
  • Headings that needed a different look use a Mimic style, not a different level.

List View in the editor shows every block in order, including headings, so you can scan the structure. See Navigating blocks with List View.