Do you already have an account? Log in
Is this your first time here? Register
Do you already have an account? Log in
Is this your first time here? Register
 
We are launching soon, leave your email to be the first who gets the full version

Tame the beast:
the basics of HTML emails

8 min read
HTML is an abbreviation for Hypertext Markup Language — a special programming language for designing web pages. HTML allows you to change colors and fonts, add styles and formatting, etc. And it’s a tough skill to master.
Your emails are also little web pages, and if you want to make them beautiful… You guessed it — you need HTML. As a marketer, you likely don’t want to spend your time on HTML coding at all, let alone learning it. But what do you do if you lack the necessary skills and a company specialist that can do it for you?
In this article, we will cover the basics of HTML — and then show you a simple way to avoid interacting with it too much.

Ancient technology

Coding HTML emails is similar to coding HTML websites but in the prehistoric age. The way websites are coded is very different now from what it was at the beginning of the century. But HTML emails… They didn’t change. They’re still an incomprehensible old-school pain in the back.
Don’t get us wrong: there are new up-to-date ways to code your emails. The problem is that you won’t use them. While Gmail and some other ESPs’ engines can display them properly, many popular email clients will fail you. For instance, Outlook still uses Microsoft Word as its engine for email rendering. Do you see now how ancient these technologies are?
The choice here is simple. You either use old-school coding and have a terrible headache or lose potential reach and have terrible campaign results. And in email marketing, you just can’t go for the second option. So back to the Dark Ages of HTML you go!

Ancient technicalities

Any HTML email has two main components: head and body. Let’s quickly define them.
Head is where the title and meta tags are. It also includes other data, like text style, CSS animations, media files, etc. It’s enclosed in <head> and </head> tags.
In this section, you also state the document type using the <!DOCTYPE> attribute. It allows engines to understand how to read and render the code on the web page. And the text/HTML element indicates that the text should be treated as HTML.
To make a responsive HTML email, you should include the <meta name = "viewport" /> tag. It contains information on how to properly scale the email for any device.
Body is the actual content of the email. This part is enclosed in <body> and </body> tags. It has to be formatted old-school. Using tables instead of divs will allow for the correct rendering of email contents in all email services (this is one of the ancient techs you have to resort to with HTML emails).
You should always create at least two tables: one for the content of an email, and the second to be a template container. The template container will be your main table; you will place your email content table inside of it.
The table consists of table rows (tr), and they consist of table cells, or table data (td). To make the table work, you need to have the same number of cells in each row.
It should look like this:

<table>
  <tr>
    <td>Try</td>
    <td>Markeaze</td>
    <td>Today</td>
  </tr>
  <tr>
    <td>3</td>
    <td>8</td>
    <td>5</td>
  </tr>
</table>

Ancient advice

Since many ESPs still can’t properly handle modern formatting, you need to secure your emails as much as you can. After all, Outlook still exists out there, and some of your subscribers might be using it — you have to ensure the emails display correctly for them.
How can you do it?

Use tables instead of divs

We already said it, and we’ll keep saying it: if you want your emails to render correctly in all ESPs, you must use tables, not divs. Tables allow for a clear email structure, so all recipients will see the same result, no matter what email client they’re using. You can always take a risk and use divs, which makes sense if you know for a fact that your subscribers use up-to-date ESPs, but we advise you against it.
Tables work 100% of the time. Divs… well, they look clean. The choice is yours.

Check the fonts

MS Outlook and some other ESPs can only render certain fonts. Times New Roman automatically replaces any fonts that are not standard or native to them. You can imagine what the results look like for the recipient. You’re much safer selecting a standard font from the beginning. Even if you have your own brand font, set a standard one separately for the older ESPs. The standard list includes Arial, Comic Sans MC, Courier New, Georgia, Helvetica, Lucida Sans Unicode, Tahoma, Verdana, Times New Roman, and Trebuchet MC.

Supplement each picture with an ALT text

The older ESPs block images, and even in modern email clients, some users turn on image blocking. How do you get around this? Well, you don’t — unless the recipient wants you to. But you can — and totally should — provide them with substitute texts. First of all, then your subscribers will at least see something. Second of all, there’s a chance they’ll unblock the images after seeing the alt text. And third of all… You can get really creative here!
Email Monks make the funniest alt texts — check out this Easter special!

Make narrow emails

The optimal size for any email is 550-600 pixels. If it’s wider than that, in some email clients it may open in a crooked way, ruining the whole composition. It's safer to create narrow enough emails right away — then they will be displayed correctly on any screen (even mobile, if you don’t have a separate mobile version of the email) and in any ESP, even including Outlook! And yes, there are ways to bypass this limitation, but they’re more difficult and less reliable.
Opening a red-wide email on a green-wide device can turn out funny — but not for you.

Don’t overcomplicate

Listen, everybody loves interactive elements. They’re fun and engaging, and we are the first ones to suggest you make everything you can interactive… when it’s appropriate. What works well on a website might fail you in an email. Technically you can plug in as many polls, sliders, or even web pages as you want. But what’s the point if most of your subscribers will only see a broken half-empty email? Their experience is your sales, remember.
Outlook’s definitely not a fan of all those fancy add-ons, as you can see.

Modern solution

Since HTML email coding is such an ancient and painful tech to handle, you likely want to avoid interacting with it as much as possible. Luckily, the solution is up-to-date and simple: no-code email builders come to save the day (and your time, and your nerves).

No-code email builders are the way to go when constructing emails or email templates: they’re much faster, easier, and more convenient than any alternative. You can use them via websites or download them as separate programs or apps. The best email builders do the entire code for you, fully protecting your sanity from having to deal with HTML.
The main features to look out for when choosing a no-code email builder:
  • 1
    Drag&Drop
    This feature is mandatory. Drag&Drop builders save you all the time in the world, and you don’t need to know the code in the slightest. All you have to do is select the blocks you like, drag them to any place in your email and drop them there — and it will all work. Just as the name suggests, it’s that easy.
  • 2
    Template library
    In some cases, you don’t need to craft emails from scratch. In others, you want a solid basis to build upon. And in any scenario, you’re better off having a library of prebuilt templates than not. Being able to browse multiple layouts and designs is helpful both as a base and for inspiration, so this feature is necessary.
  • 3
    Integration with stock image libraries
    Good designers know where to take stock images from and how to handle them according to the law. Do you? To play it safe, you can use a feature that some solutions provide — integrated stock image libraries. This allows you to quickly find dozens of pictures that suit your needs and not worry about legal issues.
  • 4
    User-friendly interface
    The more features and options a builder has, the better. But it can get overwhelming with all the buttons and sliders, too. And you’re not here to waste time trying to figure this stuff out. Finding a solution that has an intuitive UI is just as important as finding a builder with advanced features — in both cases, it’s about saving your time.
  • 5
    Responsive customization
    In a world where screens can have any size and proportion, making a non-responsive email is not an option. Your subscribers may view it on a PC, tablet, or smartphone, and you need to adapt. That’s why every good email builder offers a responsive design feature. No matter the screen size, your emails will look the way you intended.
  • 6
    Dark mode adaptation
    More than 80% of users worldwide have their devices set to dark mode. This means that you have two options: either their system will automatically convert your emails to dark colors (likely butchering the design) or you will make a dark mode version of them from the start. A good email solution allows you to do it, and this feature is crucial.
  • 7
    Test sending
    Even if everything looks great in the builder itself, you need to test your email before sending it. So obviously a test-sending feature is a mush — it allows you to send the email to yourself and see what it will actually look like; advanced solutions can even show you the email’s appearance in different ESPs.

Conclusion

Any marketing emails these days are expected to be HTML-coded by default. This is especially true for the fashion industry, where every little detail matters and has to look spectacular, so you can’t just avoid HTML and get away with it.
Luckily, you don’t have to study coding or hire a specialist to do the job for you, and the solution is really simple. Find a no-code email builder that suits your needs perfectly, and forget about the hassle and pain of figuring out code… For emails, at least.

Related Content