By Nancy Fontanez
Apr 20, 2023
HTML for Email: A Complete Guide for Beginners
Are you struggling to design emails that look great across different email clients? Don't worry, you're not alone! HTML compatibility is a big challenge when it comes to email development. In this blog post, I'll explore 63 HTML elements and attributes that you can use to enhance your email design. I'll also discuss their compatibility with popular email clients like Apple Mail, Gmail, and Outlook. So, whether you're a beginner or an experienced email developer, this post has something for everyone!
1. <address>: Use this element to present contact information such as an email or physical
address.
✅: Apple Mail, Gmail, Outlook
2. align attribute: Use this attribute to align content horizontally. Although it works in most
email clients, it's recommended to use CSS instead.
✅: Apple Mail, Gmail, Outlook
3. Local anchors: Use this to create links to other parts of the same email.
✅: Apple Mail, Gmail, Outlook
4. aria-describedby attribute: Use this attribute to provide extended descriptions for
accessibility.
✅: Apple Mail, Gmail
❌: Outlook
5. aria-hidden attribute: Use this attribute to hide content from screen readers.
✅: Apple Mail, Gmail
❌: Outlook
6. aria-label attribute: Use this attribute to define an accessible label for an element.
✅: Apple Mail, Gmail
❌: Outlook
7. aria-labelledby attribute: Use this attribute to reference an accessible label.
✅: Apple Mail, Gmail
❌: Outlook
8. aria-live attribute: Use this attribute to announce dynamic content changes for
accessibility.
✅: Apple Mail, Gmail
❌: Outlook
9. <audio> element: Use this element to embed audio files in an email.
✅: Apple Mail
❌: Gmail, Outlook
10. background attribute: Use this attribute to set a background image or color. It's
recommended to use CSS instead.
✅: Apple Mail, Gmail, Outlook
1️1. <base>: Use this element to specify the base URL for relative links.
✅: Apple Mail
❌: Gmail, Outlook
12. <bdi> element: Use this element to isolate bidirectional text.
✅: Apple Mail
❌: Gmail, Outlook
1️3. <blockquote> element: Use this element to quote content.
✅: Apple Mail, Gmail, Outlook
1️4. <body> element: Use this element to define the content of the email.
✅: Apple Mail, Gmail, Outlook
1️5. <button type="reset">: Use this element to reset form values.
✅: Apple Mail
❌: Gmail, Outlook
1️6. <button type="submit">: Use this element to submit a form.
✅: Apple Mail
❌: Gmail, Outlook
1️7. <del> element: Use this element to indicate deleted text.
✅: Apple Mail, Gmail, Outlook
1️8. <dialog> element: Use this element to create modal dialogs.
✅: Apple Mail
❌: Gmail, Outlook
1️9. dir attribute: Use this attribute to set the text direction.
✅: Apple Mail, Gmail, Outlook
20. <div> element: Use this element to group content.
✅: Apple Mail, Gmail, Outlook
21. HTML5 doctype: Use this to declare the modern HTML version.
✅: Apple Mail, Gmail, Outlook
22. <form> element: Use this to create interactive forms.
✅: Apple Mail
❌: Gmail, Outlook
23. <h1> to <h6> elements: Use these to define headings.
✅: Apple Mail, Gmail, Outlook
24. height attribute: Use this attribute to set the height of an element. It's recommended to use CSS instead.
✅: Apple Mail, Gmail, Outlook
25. Image maps: Use these to create clickable areas on images.
✅: Apple Mail, Gmail, Outlook
26. <input type="checkbox">: Use this to create checkboxes.
✅: Apple Mail
❌: Gmail, Outlook
27. <input type="hidden">: Use this to store hidden data.
✅: Apple Mail
❌: Gmail, Outlook
28. <input type="radio">: Use this to create radio buttons.
✅: Apple Mail
❌: Gmail, Outlook
29. <input type="reset">: Use this to reset form values.
✅: Apple Mail
❌: Gmail, Outlook
30. <input type="submit">: Use this to submit a form.
✅: Apple Mail
❌: Gmail, Outlook
31. <input type="text">: Use this to create a text input field.
✅: Apple Mail
❌: Gmail, Outlook
32. lang attribute: Use this attribute to define the language of the email.
✅: Apple Mail, Gmail, Outlook
33. <link> element: Use this to link to external resources such as stylesheets.
✅: Apple Mail
❌: Gmail, Outlook
34. <ul>, <ol> and <dl>: Use these to create unordered, ordered, and definition lists.
✅: Apple Mail, Gmail, Outlook
35. loading attribute: Use this attribute to control the loading of images.
✅: Apple Mail
❌: Gmail, Outlook
36. mailto: links: Use these to create email links.
✅: Apple Mail, Gmail, Outlook
37. <marquee> element: Use this to create scrolling text.
✅: Apple Mail, Gmail
❌: Outlook
38. <meter> element: Use this to display scalar measurements such as disk usage or voting results.
✅: Apple Mail
❌: Gmail, Outlook
39. <object> element: Use this to embed external content such as videos or documents.
✅: Apple Mail
❌: Gmail, Outlook
40. <p> element: Use this to define paragraphs.
✅: Apple Mail, Gmail, Outlook
41. <picture> element: Use this to create responsive images that adapt to different screen sizes.
✅: Apple Mail
❌: Gmail, Outlook
42. <progress> element: Use this to display progress bars.
✅: Apple Mail
❌: Gmail, Outlook
43. required attribute: Use this to make a form field required.
✅: Apple Mail
❌: Gmail, Outlook
44. role attribute: Use this attribute to define the semantic role of an element for accessibility.
✅: Apple Mail, Gmail
❌: Outlook
45. <rp> element: Use this element to define fallback text for browsers that don't support
ruby text.
✅: Apple Mail
❌: Gmail, Outlook
46. <rt> element: Use this element to define ruby text for East Asian typography.
✅: Apple Mail
❌: Gmail, Outlook
47. <ruby> element: Use this to display ruby annotations for East Asian typography.
✅: Apple Mail
❌: Gmail, Outlook
48. <select> element: Use this to create dropdown menus.
✅: Apple Mail
❌: Gmail, Outlook
49. HTML5 semantics: Use these semantic tags to define the purpose of different sections of the
email.
✅: Apple Mail, Gmail, Outlook
50. <small> element: Use this to define small text.
✅: Apple Mail, Gmail, Outlook
51. <span> element: Use this to define an inline container that doesn't affect the layout.
✅: Apple Mail, Gmail, Outlook
52. srcset and sizes attributes: Use these attributes to define multiple image sources and their sizes for responsive images.
✅: Apple Mail
❌: Gmail, Outlook
53. <strike> element: Use this to strike through text.
✅: Apple Mail, Gmail, Outlook
54. <strong> element: Use this to define bold text.
✅: Apple Mail, Gmail, Outlook
55. <style> element: Use this to define inline CSS.
✅: Apple Mail, Gmail, Outlook
56. Embedded <svg> image: Use this to display scalable vector graphics.
✅: Apple Mail
❌: Gmail, Outlook
57. <table> element: Use this to create tables.
✅: Apple Mail, Gmail, Outlook
58. target attribute: Use this to define the target window for links.
✅: Apple Mail, Gmail, Outlook
59. <textarea> element: Use this to create a multiline input field.
✅: Apple Mail
❌: Gmail, Outlook
60. valign attribute: Use this to set the vertical alignment of an element. It's recommended to use CSS instead.
✅: Apple Mail, Gmail, Outlook
61. <video> element: Use this to embed videos.
✅: Apple Mail
❌: Gmail, Outlook
62. <wbr> element: Use this to define a line-break opportunity.
✅: Apple Mail, Gmail,
Outlook
63. width attribute: Use this attribute to set the width of an element. It's recommended to use CSS instead.
✅: Apple Mail, Gmail, Outlook
