Skip to main content

Heading

<h1> – <h6>Section title with heading level hierarchy.

This page shows you how to use the Heading block to create section titles and organize your content with a clear hierarchy.

What it does

The Heading block adds a title to your page — anything from a main page title down to a small subsection label. Each heading has a level (1 through 6) that tells browsers and screen readers how your content is organized.

You pick the level from the block toolbar. The text, size, color, and spacing are all controlled through the editor sidebar — no CSS required.

When to use

  • Page titles — The main title at the top of a page (level 1)
  • Section titles — Major content divisions (level 2)
  • Subsections — Nested areas within a section (levels 3–6)

Heading levels

LevelUsageExample
h1Page titleOnly one per page
h2Major sectionsFeatures, About, Contact
h3SubsectionsIndividual features
h4Sub-subsectionsFeature details
h5h6Rarely neededDeep nesting

Heading hierarchy

Heading levels create an outline of your page. Search engines and screen readers both rely on this outline to understand your content.

Keep levels in order. An h2 should be followed by an h3, not an h4. Think of it like a nested list:

  • h1 — Page Title
    • h2 — Section One
      • h3 — Subsection
      • h3 — Subsection
    • h2 — Section Two
      • h3 — Subsection
Common mistake

Skipping heading levels (for example, jumping from h1 straight to h3) breaks the document outline. Screen readers use headings to navigate, and a broken hierarchy makes your page harder to use for people relying on assistive technology. Always go in order.

Dynamic headings

Use expressions to pull heading text from your data:

<h1>{{ post.title }}</h1>
<h2>{{ term.name }}</h2>
<h3>{{ user.display_name }}</h3>

This is useful in templates where the heading content comes from a post, term, or user field rather than static text.

Accessibility & SEO

  • Use one h1 per page — your theme may already render one from the page title.
  • Never skip heading levels — search engines and screen readers both rely on the outline.
  • Write headings that describe the content that follows — this helps both indexing and navigation.
  • Screen readers let users jump between headings, so clear, descriptive text matters.

HTML output

The Heading block outputs the standard HTML heading element matching the level you choose:

<h2>Section Title</h2>

Next steps

  • Paragraph — Add body text below your headings
  • Text — Insert inline dynamic text within content