tabler/site/content/guides/html-email-best-practices.mdx

---
title: How to create an HTML email
seoTitle: 10 most important rules you should keep in mind when coding HTML emails
description: Do you want to code your own HTML emails? Find out the most important rules you need to take into account, so that your emails display correctly and look attractive.
imageTitle: HTML email best practices
imageEmail: progress
summary: Designing and coding an attractive and mobile-ready HTML email message might seem like a difficult task. In fact, it doesn’t have to be, as long as you remember about a few basic rules. Assuming that you are familiar with the basics of HTML and CSS, we’ve put the rules together. Following them will make your work much easier and the results will speak for themselves. Read the article to find out more.
image: https://images.unsplash.com/photo-1603791452906-af1740e171bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1216&h=400&q=80
date: 2022-09-05 00:00:00
done: true
---

<GuideImage src="/img/tabler-emails/screenshots/progress-full.png" width={480} height={645} description={`Sample email you can find in the Tabler Emails package`}/>

1. Use an HTML table. Don’t use divs and floats. Tables will help you create emails that will look good in every email client.
2. Use HTML attributes to define the dimensions and the design of the table (width, valign and padding).
3. Don’t use embedded styles. Instead, use inline CSS in your HTML code.
4. Avoid Shorthand CSS (`#000`).
5. Avoid Flash and JavaScript.
6. Try to avoid HTML5 and CSS3.
7. The width of an email shouldn’t be more than `600px`.
8. Use of email-safe fonts. ([Here is the list](https://templates.mailchimp.com/design/typography)). If you use custom fonts, e.g. Google Fonts ([https://fonts.google.com](https://fonts.google.com)), set a fallback font, to be sure that everything will display correctly no matter what.
9. Use absolute addresses for images.
10. Keep the email file size under `100kb`.

Sticking to the rules above is an absolute must-do if you want to code attractive HTML emails. However, it’s equally (or even more) important to test them across as many email clients and devices, as possible. Also, don’t forget that these days, most users open email messages on their mobile phones, so they must be mobile-optimized. If you create your own templates, we’d recommend applying Litmus to test them. If you prefer to use ready-made email templates that have been thoroughly tested and mobile-optimized, take a look at [Tabler Emails](https://tabler.io/emails), where you can find over <EmailsCount /> responsive and customizable templates.