What is heading hierarchy in HTML email?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
Ever sent an email that looks perfect but falls apart for someone using a screen reader? That's heading hierarchy at work. It's the difference between structure that only sighted people see and structure that works for everyone.
Heading hierarchy means using H1, H2, H3 tags in logical order. Screen readers use these headings like a GPS. they let users skip between sections without reading every word. Start with one H1 for your main topic or headline. Then use H2s for major sections. Don't skip levels (no jumping from H1 straight to H3). Use H3s and below for sub-sections. Keep it consistent across your emails so readers know what to expect.
And Here's the thing: if you style text as large and bold but use a <p> or <div>, screen readers don't know it's a heading. Users can't jump to it. Use actual heading tags, then style them however you need with CSS. Structure and appearance can both be right.
Next step: Audit one of your templates. Does it have one H1? Do the H2s come right after, without skipping? Check the HTML source to see the actual tags, not just what it looks like visually. If you're using a drag-and-drop builder, look for options to set semantic heading levels, not just font size.
Related: email accessibility, screen readers.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
