What is HTML Email Preheader Text?

When you take a look at your email inbox you’ll see two sections of text apart from the name of the sender, the title of the email message and the preheader text of the message underneath the title.  When an email message is composed through email service providers such as Mailchimp you have the option to add preheader text to boost the amount of email opens your message gets, but we can also add it manually in our HTML.

Preheader Text Best Practices

When no preheader text is specified, email clients will use the first text it can read and populate the section of the inbox below your email title with that text.  Around the web, you’ll find endless tips and recommendations for email marketing to get the best open-rate with the preheader text that you use but there is only one simple best practice everyone can mostly agree on.  That best practice is to keep the length of your preheader text message between 85-100 characters, with some recommendations as low as 40 characters and others as high as 130 characters. The first reason for this is to limit the attention span needed to get your preheader message across and that depending on where the email is opened the email client may only display a small amount of text depending on the screen width or device.

Preheader Text HTML & CSS Code

As we layout our preheader text manually we need to keep two things in mind:

1. Placing our preheader text before any other text that appears in the body of our email template.
2. Making sure the preheader text doesn’t display in any email clients and remains hidden so it doesn’t distort or disrupt the design of our email template.

Here is an example of preheader text HTML & CSS:

<div style="font-size:0px;line-height:1px;mso-line-height-rule:exactly;display:none;max-width:0px;max-height:0px;opacity:0;overflow:hidden;mso-hide:all;">
<!-- Add 85-100 Characters of Preheader Text Here -->
</div>

Using a <div> tag is not recommended for laying out sections for your email template design but in this case it can be used due to the design flexibility of the tag.  All we need here is an element that we can hide when adding our styling to it with the text inside of it still being picked up by email clients to apply our preheader text. So what this styling does is assures us the the text will not appear in any email clients whatsoever, as tested with popular email preview services Litmus and Email on Acid.

..continue to the next lesson: Responsive HTML Email Tables.