├── LICENSE ├── README.md └── translations ├── fr-FR └── README.md └── ja-JP └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 HTeuMeuLeu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Email Coding Guidelines 2 | 3 | This document aims to address several principles you can apply to code HTML emails. Each guideline is objectively vindicated to comply with modern email clients and with graceful degradation in mind for others. 4 | 5 | This is a living document and new ideas are more than welcome. Feel free to contribute. 6 | 7 | ## HTML5 doctype 8 | 9 | The HTML5 doctype is clean, short and easy to remember. It's used by a vast majority of email clients, so your code will inherit it anyway. Just be aware that some other email clients might use other doctypes and your email might end up being rendered in [Quirks Mode](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | **See also:** 20 | 21 | * [Which doctype should you use in HTML emails?](https://emails.hteumeuleu.com/which-doctype-should-you-use-in-html-emails-cd323fdb793c) 22 | 23 | ## Lang 24 | 25 | Defining the `lang` of the HTML content helps assistive technologies like screen readers to pick the right voice to read the content. The `lang` attribute needs to be defined with a valid [language tag](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) on the `` opening tag. But because some email clients (especially webmails) remove the `` element, the `lang` attribute also needs to be set on a wrapping element within the ``. 26 | 27 | ```html 28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | ``` 37 | **See also:** 38 | 39 | * [Email accessibility in action](https://emails.hteumeuleu.com/email-accessibility-in-action-f7f9d945cf67#1592) 40 | 41 | ## Semantic text markup 42 | 43 | The HTML code of an email should use as much semantic markup as possible. The use of `

` to `

` headings as well the use of `

` for paragraphs is greatly recommended. 44 | 45 | ```html 46 | 47 | Lorem ipsum 48 | 49 | 50 |

Lorem ipsum

51 | ``` 52 | 53 | Container tags such as `
`, `
`, `