H2
Use H2 for major section headings below the main page headline.
When to use H2
- Introduce benefit sections, product sections, FAQs, testimonials, or pricing blocks.
- Break a long landing page into readable parts.
- Keep page structure clear after the H1.
Content settings
| Setting | What it controls |
|---|---|
| Text field | The visible section heading. |
| Type | H2 uses the h2 heading tag. |
| Inline formatting | Highlighted words, links, or emphasis when available. |
Style settings
| Style area | What you can adjust |
|---|---|
| Alignment | Heading alignment. |
| Typography | Font family, size, weight, line height, letter spacing, and responsive values. |
| Color | Text and highlight colors. |
| Spacing | Margin, padding, width, and responsive spacing. |
Best practices
- Use H2 to start each major page section.
- Avoid skipping from H1 directly to H3 when H2 would better describe the structure.
- Keep headings direct and benefit-focused.
Testing notes
- Scan the page outline and confirm each major section starts with a clear H2.
- Preview mobile wrapping because H2 text is often large.
- Check highlight colors and spacing when the heading sits above CTAs, images, or cards.
FAQ
When should I use H2?
Use H2 for major sections below the page H1, such as benefits, product details, testimonials, pricing, FAQs, guarantees, and next steps.
What should I configure before publishing an H2?
Review the heading text, inline formatting, alignment, typography, text color, highlight colors, width, margin, padding, and responsive values.
Can I skip H2 and use H3 instead?
Avoid skipping H2 when the content starts a major section. H3 is better for subsections or card titles inside an H2 section.
What should I check if an H2 feels too large?
Adjust typography and responsive font size rather than changing the semantic heading level only for visual size.