Can I use a DIV in an email template?

Question

I am greatly confused about designing an email template for a mailchimp campaign. I want to know if I can use a div with a class of "Container" on my email template. Is using div tags supported by all mail clients? I am using DIV only for the container but in the inner part of the template I have used table, tr and td tags. Please let me know.

Thanks.

You can use whatever you want in an email **but** some email client might not be able to interpret it. (IMHO, it's a good idea is to always include a plaintext *fallback* and to inline css on each html tags) — , Feb 20 '14 at 06:09

score 22 · Accepted Answer · edited May 23 '17 at 12:31

22

You can use div, however tables are supported more consistently. If you try to go the div route, you'll find some of your CSS will fail.

Also, by going with tables, it opens up the old school html attributes that only work in tables. These include align, valign, bgcolor etc, all of which are 100% supported, while their CSS equivalents have partial support.

On a side note, here are all the resources you will need to get started in html email.

edited May 23 '17 at 12:31

Community

1
1

answered Feb 20 '14 at 14:27

John

11,985
3
45
60

`align`, `valign` and `bgcolor` seemed to be supported everywhere we (my team and I) found except in the case of `Android or iOS > browser > Gmail`. Even without `bgcolor` working, `bgcolor` disabled the related `background-color` (the background issue was found in `Android > browser > Gmail`) – digiwand Aug 15 '18 at 16:48
@Ariella what element did you test it on? Was it a `` or `
`?
– John Aug 23 '18 at 19:17

score 5 · Answer 2 · edited Mar 13 '18 at 20:15

5

There is no specifications for layout using table-less nor tables. However, using tables is the preferred way as it renders all at once. This aligns with how email templates render; while div's render separately. If you use div's include your css inline to the template as some clients do not support external css.

edited Mar 13 '18 at 20:15

Patrick W. McMahon

3,488
1
20
31

answered Feb 20 '14 at 06:20

Harish Boke

557
3
16

Just need to know another thing. Can I use margin (negative or positive) on my email template? Please let me know. Thanks. – Crookbud Feb 20 '14 at 06:32
Yes, we can use margin in both ways according to your content and layout. – Harish Boke Feb 20 '14 at 06:39
Thank you so much for further reply. – Crookbud Feb 20 '14 at 06:39
2

@user3308679 margin is unsupported in Outlook.com. It is best practice to avoid margin and use padding on the containing `` element instead. – John Feb 20 '14 at 14:21

score 5 · Answer 3 · answered Sep 25 '18 at 06:01

5

As of April 2017, yes, you can use <div> tags in email. Outlook was the only major email client that didn't support them.

See https://github.com/rodriguezcommaj/principles-of-email-design and https://www.sendwithus.com/resources/templates

answered Sep 25 '18 at 06:01

Dan Dascalescu

143,271
52
317
404

2

For stats, in the end of 2018 ( https://www.campaignmonitor.com/resources/guides/most-popular-email-clients ) Outlook covered around 9% of email client usage, where gmail had 27% and apple's iphone had 28%. If it is okay for you, 9% means that about 1 out of every 11 people will not see your div tags. – Jeff Clayton Nov 22 '19 at 13:58
So this means we can depriorize Outlook? – dawn Oct 20 '21 at 16:54

Can I use a DIV in an email template?

3 Answers3