How to Code Emails: A Step-by-Step Guide

Coding emails is a craft all its own.Why? Because unlike websites, email clients heavily restrict the use of modern HTML and CSS, which means you have to play by a special set of rules.In this article, we've put together a step-by-step guide that will help you code an email correctly — even if you're a beginner.

Step 1. Define the email's structure

Header (logo, navigation)
Main banner or offer
Main text block
Product or service blocks
Call to action (CTA)
Footer (contacts, unsubscribe, links)

Tip: sketch out the layout on paper or in Figma first — it'll help you see the logic.

Step 2. Use tables instead of divs

❌ divs are poorly supported by many email clients.✅ Use <table>, <tr>, and <td> to mark up your blocks.

Example:

<tr>

<td align="center">Your content here</td>

</tr>

</table>

Step 3. Write inline styles

❌ External CSS files or <style> inside <head> are often ignored.✅ Add styles directly to the tags:

Step 4. Set the container width

The maximum email width is 600–650 px.
For mobile, use a width of 100%.

Tip: use responsive blocks or media queries if you're confident working with CSS.

Step 5. Add images correctly

✅ Use <img> with the following attributes:

alt — for alternative text,
width and height — to set dimensions,
style="display: block;" — to remove extra spacing.

Step 6. Build buttons out of tables

❌ Don't use <button>.✅ Build buttons with <table> + <a>:

<tr>

<a href="#" style="color: #fff; text-decoration: none;">Click here</a>

</td>

</tr>

</table>

Step 7. Check responsiveness

Use media queries for mobile adaptation (if needed).
Check how it displays in Gmail, Outlook, Apple Mail, and mobile apps.

Step 8. Test before sending

Send a test email to yourself.
Check it with images turned off.
Run it through Litmus or Email on Acid to check it across different clients.

Conclusion

Coding emails is about balance:✔ clean code,✔ simple, proven elements,✔ mandatory testing.