Email Preheader Text: Using the Line After the Subject
Email preheader text is the short line inbox apps show right after the subject line. Skip it, and the email client just grabs the first text it finds in your message. That’s why so many previews say “View this email in your browser” or show the first menu link instead of an actual summary. Below: what the preheader is, how clients pick it, how to write one and how to hide it in your HTML.
What Is Email Preheader Text?
A preheader is the bit of preview text that inbox lists show next to or under the subject line. One thing, two names. Preheader usually means the line in your code, and preview text means what the subscriber actually sees. Either way, people read it before they open anything (along with your sender name and subject), so it plays a part in whether the email gets opened at all. Its job is to back up the subject line. Not replace it.
Why Does My Preview Show “View This Email in Your Browser”?
With no preheader set, email clients take the first readable text in the HTML. In most templates that’s the browser link, a logo’s alt text or the navigation. The usual suspects:
- the “view online” or “view in browser” link at the top of the template
- alt text on a header image or logo
- menu items such as “Shop”, “Blog” or “Contact”
- lines like “Having trouble reading this email?”
Want to check your own? Send a test to your inbox, open it on desktop and on your phone, and read the preview line. The fix is simple. Put a real summary at the very top of the code, so it’s the first thing the client finds.
How Long Should a Preheader Be?
There’s no one correct preheader length, because the visible preview shifts with the email client, the device and the screen width. A full sentence on a wide desktop monitor can get chopped after a few words on a phone. Solid mobile-responsive email layouts keep the rest of the message readable on a small screen as well. And the subject eats into it too - a long subject leaves less room for whatever comes after. So the practical rule: put the main message in the first few words, where it survives the cut. Then check how it actually renders in the clients your list uses.
Writing the Subject Line and Preheader Together
Think of the subject line and preheader as one message, with the preheader filling in what the subject leaves out. A few pairings that work:
- Topic and detail: the subject names the topic, and the preheader gives the specific point.
- Question and hint: the subject asks a question, and the preheader hints at the answer.
- Offer and condition: the subject names the offer, and the preheader adds the deadline or the terms.
Don’t just repeat the subject word for word. And drop generic filler like “Our latest newsletter” (it tells the reader exactly nothing). Keep it honest, too. If the preview promises something the email doesn’t deliver, you burn trust faster than you pick up opens. For the other half of the pair, here are some tips on writing better subject lines that pair well with a strong preview.
How to Add Hidden Preheader HTML to Your Template
Drop a short block of text right after the opening body tag and hide it with inline CSS. The inbox preview still picks it up, but nobody sees it once the email is open. Here’s the setup:
- Add a
divas the first element inside<body>. - Write your preview text inside it.
- Apply the hiding styles: display none, zero font size and line height, zero max height, zero opacity and hidden overflow.
- Optionally, add invisible spacer characters after the text so the client doesn’t drag body copy into the preview.
A bare-bones version of hidden preheader HTML:
<body>
<div style="display:none; font-size:0; line-height:0; max-height:0; opacity:0; overflow:hidden;">
Your summary goes here, key point first.
‌ ‌ ‌
</div>
...
</body>Clients don’t all treat hidden elements the same way, so test before every big send. Building the email in a builder with live preview lets you spot layout problems while you’re still editing, not after the campaign’s already out the door.
Testing Preview Text Before You Send
Send tests to real inboxes on the main clients and devices your subscribers actually use. Then read the sender name, subject and preview line together, the way a subscriber would. Mobile deserves extra attention. Narrow screens cut the preview the most. Make sure the view-in-browser link and the menu aren’t leaking into the preview anymore. Once the block works, save it in your base template, so every campaign starts with it. Our email templates and design articles go into how to structure that template.
Email preheader text is one small line you control completely. Honestly, few parts of an email give you this much visibility for this little effort. So set it on purpose in every send, instead of letting the client pick it for you.
FAQ
Is preheader text the same as preview text?
In practice, yes. “Preheader” is the element in your email code, and “preview text” is what the inbox shows from it. Marketers and tools use the two terms interchangeably.
What happens if I leave the preheader empty?
The email client fills the preview with the first text it finds in your HTML. Often that’s the browser link, image alt text or a navigation menu. It looks sloppy, and it wastes space that could have talked someone into opening the email.
Should the preheader be visible inside the email?
Either works. A hidden preheader keeps the design clean. A visible one doubles as the email’s opening line. Pick one, use it consistently in your template, and test how it looks both in the inbox and in the opened message.
