HTML Email Header 101: All you need to know + Design examples

At first glance, the topic of email headers might seem like common knowledge, especially to those who are involved in email marketing on a daily basis.
The common conception is that email headers are the first section of your email templates, that comes right before your email body. And that is not incorrect. But, there is much more to it than just that.

In this blog post, we will start by providing you with some email header design examples and ideas to inspire your own design efforts. And we will go through the technical aspect of HTML email headers, and help you understand what sort of information lies beneath it.

What is an Email Header?

The email header is created automatically by your ESP or CRM software as soon as you create an email message. More information is added as your message travels from your inbox to the final recipient.

This added information consists of email processing time, authentication (SPF, DKIM, etc.), and email scoring and categorization.

There are certain mandatory header lines, such as From, To, and Date, and there are optional but commonly used ones (called envelope headers), such as Cc and Subject.

Keep in mind that every header line can be forged. The only one you can trust is the Received line, which is created by your email service.

The email header information contains:

• From: Sender
• To: The main receiver
• Date
• CC: Secondary receivers
• Subject line
• Content-type
• X-header

From

The From line contains information on the email sender. Some email clients allow for several senders for situations where the writer and the sender is not the same person. For security reasons we replaced “@”-s with {at}

Example: From: Daniel Bishop <daniel.v.bishop{at}gmail.com>

To

In this line, you can see who is the receiver of the message. If there is more than one of them, they are separated by a comma. Sometimes this information does not match the ‘’envelope-to’’ information.

Example: To: Daniel Bishop <daniel.v.bishop{at}gmail.com>, Yasmine Nahdi <yasmine{at}chamaileon.io>

Date

The date line shows at what time the message was sent.

CC

This is one of the most commonly used optional header lines. It contains information of several recipients that will receive a carbon copy of the email.

Example: CC Daniel Bishop <cc-daniel.v.bishop{at}gmail.com> CC Yasmine Nahdi <cc-yasmine{at}chamaileon.io>

Subject line

This is the line that the receiver first sees. It should be a good representation of what the email body is about. You can learn more about email subject lines in our previous blog post.

Example: Subject: Email Marketing Content Contribution

Content-type

This determines the format of your message, for example, HTML or plain text. As emails can contain many more formats (images, videos, gifs) than just plain text, an internet standard called MIME (Multipurpose internet mail extension) is what makes this possible.

X-headers

These are the non-standard headers that are added to your email message. They vary depending on the requirements of the sender. Also, some x-headers are added by your email host, and they are usually connected to specific email protocols like DKIM, SPF, DMARC, spam information, and more.

Email header design standards

Email header design can vary according to what your email is about and what industry you operate in. However, there are some email header design best practices that you can find in most emails.

View in Browser

The View in Web Browser call to action was added to emails because of rendering issues in different email clients. Since it was very difficult to create an email design that rendered perfectly and similarly in every email client, marketers added that the “View in Browser” CTA to their email headers to allow subscribers to view the email message and designs in case the email rendered badly (broken images, columns, missing fonts, etc).

The View in Browser link is still very common, especially for all image emails and other inaccessible design practices like huge background images and so on.

This is an indicator of poor HTML email development. Creating a bulletproof email code that renders the same way in every email client is a far better and more sustainable solution. Not to mention that it guarantees that subscribers will receive your content without needing to take an extra step of clicking on a “View in Browser” button.

Logo in the Email Header

The most common email header design practice is to insert your brand’s logo. This helps subscribers recognize your brand immediately: the first thing they see is your logo. It also creates some sort of familiarity and coherence in your email designs.

The email header logo image should be a PNG file, with a transparent background. This allows you to expand your creative email designs, like applying a background image to your email header for example.

The Marketer’s Ultimate Guide to Embedding Images in Email

[optin-monster-shortcode id=”rxjxam5zt5q3oo0sr7o9″]

Logo and Menu in Email Header

Another email header design example is creating a menu for your email. This practice is commonly used in e-commerce and retail emails, where it’s necessary to include multiple CTAs.

Most brands include their logo and menu in the email header.

Email Header Design Examples from Real Brands

Now that we have covered the best email header design practices, we will present some email header design examples from real brands. These brands showed creativity in their email header design ideas and stood out. Check them out and get some inspiration for your own email header.

Countdown Timer in Email Header

Adding a countdown timer in your email header design can be a great way to create a sense of urgency right off the bat. The email header countdown timer is framed with a fun colored garland that puts the reader in the mood for Cinco de Mayo (the content of the email).

Benefits in your Email Header

Make the best out of your email header by including some product benefits. This best practice allows you to communicate the most important information to your client in the first line of your email.

As soon as your subscriber opens the email, the first thing they see is a piece of information that intrigues them: FREE SHIPPING or 90% OFF or FREE RETURNS.

They now are aware of your offer and want to know more. This email header design sets the tone of the rest of your email and tells the clients exactly what to expect.

All in One Email Header

Take this email header example. Bergdorf Goodman took full advantage of the email header, by combining all of the best practices in one complete email header. They included:

• Shop Now Button
• View in browser CTA
• Free Shipping and other service benefits
• Company logo
• Email menu

This email header design idea can be a good place to start. If you are experimenting with email header designs, and don’t know where to start. You can include all the elements that we have mentioned, and track the clicks.

Sign Up Call To Action in Email Header

This classy email newsletter header design includes the brand’s logo and a signup CTA. Highlight your main call to action in the email header.

Need Help CTA in Email Header

Your email header can include a contact number or a direct connection to a support desk. This can be used to highlight the importance and efficiency of customer support.

Self-help organizations and similar associations that support high-risk individuals can also include this kind of header design in their emails.

How to View an Email Header in Your Email Client?

Hiding beneath the simple term “Email Header” lies a lot more information about your email’s metadata.

Metadata contains detailed information regarding the whole journey that an email message makes – something like a virtual passport.
Reading through this information will give you a much better picture of where the message came from, helping you understand whether it is a genuine message or a possible cyber attack.

Statistics for the third quarter of the last year show us an exponential growth in phishing attacks.
With an estimated 266, 387 attacks, the number is very close to the highest-measured one back in 2016, which was 277, 693.

This is why the whole concept of an email header is important. To help you successfully avoid becoming another victim of cybercrime, we’ll explain how to understand, view, and analyze a header.

Viewing an email header is much easier than understanding it. Depending on the email client you are using, you’ll need to go through a few steps before you can see the information.

Before we show you how to view headers from most commonly used email clients, one thing to note here is not to confuse the Header of a message with something called the Preheader.

The Preheader actually shares almost nothing with the header we’re talking about, except the similar name. The preheader is a small snippet of the email body that you can see before you click on the message.

View Email Header in Gmail

1. Select the email that you want to see the header for
2. Click on the three-dotted button next to your reply arrow, and choose Show Original
3. The “Original message” will be opened in a new tab that looks like this:

As you scroll down you can find the whole email header. There are also options to download the .eml file and copy to clipboard.

View Email Header in Outlook

With Microsoft Outlook having so many versions, viewing a header on some of them might be different. The ones that have the same process are Office 2010, 2013, 2016, 2019, and Office 365.

1. Double-click on an email to see the full message
2. Click on the File button and then select Properties
3. Scroll past the sections like Security, Delivery Option, etc. until you see a small panel containing the header
4. Copy the information into a text editor to see it in full

View Email Header in Office 2007

Here, the road to your header is a bit different.

1. Open the desired email
2. Select the messages tab, find the Options section, and click on the small button on the corner, which will open a dialog box
3. Find the Internet Header box

View Email Header in Yahoo! Mail

1. Open the message you wish to view the headers for
2. Click on the gear icon
3. Select the ‘’View Raw Message” option from the menu. After that, a new window will open with the full header

View Email Header in iCloud Mail

1. Double-click on the desired message
2. Find the gear button in the toolbar and select “Show Long Headers”
3. This option is toggleable; in order to stop seeing it, just click it again

View Email Header in Mozilla Thunderbird

With Thunderbird, you have two options.

The first option:

1. Double-click on the message
2. From the menu bar, navigate to View > Headers > All
3. Just like with iCloud, this is toggleable, and to stop seeing it go through the same steps: View > Headers > Normal

The second option:
Open your email and press CTRL + U. This will open a “Message Source” window with even more information than just the header.

Tracing Back an Email

To know who the message came from and to be certain that it’s not a cyberattack, take another look at the “Received” header lines.

Most of the time, you’ll be able to find something like:

Received-SPF: pass (google.com: domain of gergely{at}chamaileon.io designates 209.85.220.41

With this information, not only will you be able to determine the validity of the sender, but you’ll also be able to trace back the IP address of a possible cyber-criminal.

The Ultimate Email SPAM Law Collection – 28 Countries Included

Wrap Up

Knowing how to view and understand an email header is not one of the must-have skills for handling day-to-day email traffic, but it might be very useful in certain situations.
On the other hand, creating a good email header design is crucial to the success of your email marketing campaign. Email headers are the first thing your subscribers see when they open your email (and even before opening your email- in the email pre-header).

[optin-monster-shortcode id=”oiyqzlf6hbv2wyfxki8a”]