The structure of email has evolved to accommodate improvements to its overall functionality from its early plain text ancestors. Nowadays, our inboxes are full of well-designed and interactive electronic messages in which we can browse image carousels and play games.
So if you’re a developer looking to learn more about the structure of an email and its functions, keep reading to find out how Mailosaur can help you today!
The main sections of an email
Emails consist of two main sections: the header and the body. In an email containing HTML, the email header is not to be confused with the HTML head tag, which only includes the settings for the HTML code itself.
The email header section handles the instructions for the email, including to whom it should be sent and what kind of content is being sent.
The body section contains the code that dictates email’s structure, as well as contains any content on display for the user—including any text and embedded links. In an HTML email, this would include HTML code.
To see a real-life example, try analysing an email that you yourself have received. With Gmail, for instance, simply open an email and at its right-hand side choose the option “Show original”.
The header structure
Email headers can contain a long list of header fields. Headers generally follow the same syntax of the field’s name and body, the two of which are separated by a colon.
The information contained in the header normally includes the email’s sender and recipient(s), as well as the date and time it’s sent. The specific headers that are used for this purpose are:
Date: 08 Apr 21 14:52:18+0300 GMT
From: hello@example.com
To: hi@example.net
CC: admin@example.org
The Date and From headers are mandatory for all emails. The To and CC headers are optional — it’s possible to send an email without these headers, for example, by sending a BCC (“blind carbon copy”) email. There are more options you can include in the header that are not mandatory, such as the subject line (remember the “You’re about to send an email without a subject line!” warning in your email client?).
Email clients hide most of the information that’s otherwise accessible in raw view. This can include information on a message’s delivery, such as the authentication method used, the message’s actual time of arrival, and which servers the email has gone through.
The body structure
The focal point of an email’s structure is its body, which generally consists of Multipurpose Internet Mail Extensions (MIME) components. The MIME format is used frequently to allow for the inclusion of characters beyond the normal ASCII used in plain text emails. MIME also allows for the incorporation of media types, such as images or audio.
Image types must be specified by subtype, similar to other MIME attachment types. So whether it’s a PNG, JPEG, or a GIF, it must be specified.
Do note that binary data will be considered octet-stream, which is essentially arbitrary binary data, if it does not quite fit into the other types of data or is unknown. The octet-stream is normally used for data that doesn’t have its own MIME attachment type.
For example, an .exe file doesn’t have a dedicated MIME sub-type but it can still be sent via email by using the octet-stream attachment type. Most email clients won’t know how to open an .exe file, however, so the user will need to download the file and run it from their local machine.
Plaintext or HTML?
Though modern email clients are generally well-equipped to deal with HTML content, your customers may still find themselves in a position where, for one reason or another, they’re still unable to view your emails correctly. Whether this is due to technical malfunctions, outdated email clients, or perhaps the blocking of HTML emails, your message may never reach them.
Including a plain text version of your email increases the likelihood that your customer will be able to receive and interact with it. This is especially important in transactional emails such as password reset or email confirmations, as your customer might otherwise lose the ability to access or protect their accounts on your platform.
Allowing plain-text emails only—emails with no embedded links or images—is considered to be safer than those that incorporate outside sources, which is why your customers may sometimes opt for this option.
In fact, sending an HTML email without a plaintext version may itself raise suspicions concerning your email’s validity, in case no ‘secure’ option is offered. HTML code often references resources outside of the email itself, such as images and fonts. This is an area of concern because spammers often use the technique of only including HTML versions of emails to encourage users to open versions that will trigger malicious downloads.
The secret to including both HTML and plaintext in just one email is by specifying two content types. As an example, let’s write an email to welcome our newest customer to our newsletter. We’ll start by including content for the plain text in the email’s body section:
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
Hello and thank you for joining our pizza newsletter!
We hope you enjoy our vast selection.
Sincerely,
The Cool Pizza Team
When the customer opens your email, all they’ll see is the text welcoming them. Now, let’s add an HTML version to add some colour and flair. We’ll start by specifying the content type as HTML, rather than plain as last time.
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: 7bit
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> Welcome to the Ultimate Pizza Newsletter! </title>
</head>
<body>
<h1 style="color:red;"> Hello and thank you for joining our pizza newsletter! </h1>
<p style="color:green;margin:6;"> We hope you enjoy our vast selection.
Sincerely,
The Cool Pizza Team
</p>
</body>
</html>
To facilitate the process of designing both versions, a service like Mailosaur can help you switch between both the plain text and HTML views.
Typical email headers for HTML and plain text emails
Here is an example of an email that includes the most common standard headers and contains both plain-text and HTML versions of the body:
From: "Cool Pizza Team" <coolpizza@example.org>
To: "Pizza Friend" <admin@example.net>
Reply-To: coolpizza-support@example.net
Subject: The World of Pizza event is live!
Date: Fri, 08 Apr 2021 17:34:09 +0000 (UTC)
Content-Type: multipart/alternative; boundary="000000000000c31ae905bf6ddc5e"
MIME-Version: 1.0
--000000000000c31ae905bf6ddc5e
Content-Type: text/plain; charset="UTF-8"
Join our pizza livestream on Twitch.
--000000000000c31ae905bf6ddc5e
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> The World of Pizza event is live! </title>
</head>
<body>
<p> Join our pizza livestream on Twitch. </p>
</body>
</html>
--000000000000c31ae905bf6ddc5e--
In order to co-locate an HTML version of the body with a plain text version, this email uses the header Content-Type: multipart/alternative and specifies the boundary phrase — a string that separates the alternative content sections. The phrase is then used show where each version starts and ends.
Many emails will also include custom headers that start with a X- prefix. These headers are not standard and therefore can vary between email providers. A few example X- headers include:
X-Delivered-to: "Pizza Team" <pizzateam@example.org>
X-Spam-score: 0.0
X-Spam-known-sender: no
X-ME-VSCategory: community:social
X-Complaints-To: abuse@example.com
The email provider from this example adds a header with the spam score, includes an inferred category of the email, and mentions two additional email addresses — the inbox where the email got delivered (taking into account aliases) and an address that can be used for complaints about the email.
Conquer email creation and testing with Mailosaur
Now that you have an idea of an email’s structure and how to ensure deliverability, you’re in a much better position to craft emails that are deliverable and accessible across a variety of email clients.
To start streamlining your email testing process, sign up for a free trial of Mailosaur!