HTML Email Headings & Titles

Headings help organize your content, guide readers through your email, and make it easier for screen readers to interpret the structure. In web design, headings (<h1> through <h6>) follow a logical hierarchy—but in email, we need to be more careful.

Why Headings Matter

• Visual hierarchy: Headings draw attention to key sections like titles, offers, and CTAs.
• Accessibility: Screen readers rely on headings to help users navigate content.
• Structure: They break content into clear, readable sections—especially useful on mobile.

But here’s the catch: email clients don’t handle headings the same way browsers do. Some strip out styles, others override defaults—so we need to take full control with inline CSS.

---

✅ Best Practices

Tip	Why It’s Important
Use <h1> to <h4> only	These sizes are more reliable in email clients
Style with inline CSS	Many email clients ignore embedded or external styles
Avoid default styles	Don’t assume your heading will be bold or large—set it yourself
Use headings for accessibility, not just styling	Screen readers use them to navigate
Avoid <h5> and <h6>	Too small to read easily and not supported well

---

Sample Heading Markup (Copy & Paste)

See the Pen Basic Styled Heading by Email Code Camp (@EmailCodeCamp) on CodePen.

Subheading (Copy & Paste)

You can also use paragraph tags styled like headings if you want full control over spacing and font size:

See the Pen Subheading by Email Code Camp (@EmailCodeCamp) on CodePen.

📏 Suggested Sizes

Heading	Font Size (px)	Use Case
<h1>	28–32px	Main headline or offer title
<h2>	22–26px	Section headings
<h3>	18–20px	Subheadings or content blocks
<h4>	16–18px	Smaller section labels or dividers

🧪 Bonus: Headings in Tables

If you’re placing a heading inside a table layout (which you likely are), just drop it in like this:

See the Pen Heading in Tables by Email Code Camp (@EmailCodeCamp) on CodePen.

💡 Heading Tips

• Use inline styles for font, size, weight, spacing, and color
• Set margin: 0 to avoid unexpected spacing in some clients
• Stick to web-safe fonts unless using custom fonts via @font-face (with fallback)
• Avoid <h5> or <h6>—they’re often too small in email environments