Definition
💡 An HTML email is an email message formatted using the HyperText Markup Language. This standard markup language uses various elements, represented as tags, to define the structure and content of a digital document, such as an email.
In practice, any email message that isn't plain text is likely an HTML email. If your email includes formatting like bold or italic text, different font sizes or colors, images, or clickable links, it's almost certainly an HTML email.
You don't see any HTML tags because your email client automatically interprets the HTML code and renders the email accordingly.
Example
Imagine you receive a message containing a heading, paragraph, and image in Outlook. If you use the View message source option to display its source code, you might see something like this:
<p>This is a paragraph of text in my email. Below is an image:</p>
<img src="https://example.com/image.jpg" alt="Description of the image for accessibility purposes">
In this example:
- The <h1> element defines a large heading.
- The <p> element defines a paragraph.
- The <img> element embeds an image in the email. The src attribute specifies the path to the image, and the alt attribute provides an alternate text for the image.
In reality, the HTML code of most messages will be significantly more complicated than this, but the basic principles remain the same.
How to create and embed HTML in an email
There are three main ways to create and embed HTML code in an email, with the first two requiring you to create the code:
- Use an email client that supports HTML editing: Some advanced email clients offer HTML editing capabilities. For instance, Thunderbird, a popular free email client, allows users to easily embed HTML by installing the HTML Source Editor extension.
- Paste the HTML code into the developer console: If your email client doesn't have an HTML editor, you can use the developer tools in your web browser. Compose a new email, open the developer console (usually by pressing F12 or right-clicking and selecting "Inspect"), find the editable area of the email in the HTML structure, and paste your HTML code there.
- Use a third-party email builder tool: There are many online tools and services, such as Stripo and Beefree, that provide drag-and-drop interfaces for building HTML emails. These tools generate the HTML code for you based on your design. Some even provide web browser extensions that make it effortless to embed your HTML code in an email.
Regardless of which method you use, it's always best to keep your emails simple so they display exactly as intended across all devices.
