Aller au contenu principal

Structure d’un e-mail HTML

Fiche écrite en 2014 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Un courriel HTML ne se code pas comme une page web : les logiciels de messagerie ignorent une bonne partie du CSS, et certains retirent les feuilles de style. On revient donc aux tableaux, aux styles écrits directement sur chaque élément et aux largeurs fixes. C’est daté, mais c’est ce qui s’affiche de la même façon partout.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title></title>
  </head>
  <body style="font-family:Arial; font-size:11px; color: #000000;">
    <div align="center">
      <p><font style="font-size : 14px; font-family:Arial;color:#46463a" color="#46463a"> Monsieur Perso Prénom Nom
        </font></p>
      <font style="font-size : 10px; font-family:Arial;" color="#000000">Si vous avez des difficultés à lire cet e-mail, <a href="miroir" style="font-size : 10px; font-family:Arial; text-decoration:underline; color:#000" color="#000000">suivez ce lien.</a></font>

      <table border="0" cellpadding="0" cellspacing="0" width="750">
          <tr>
            <td width="750" height="312">
              <a target="_blank" title="" href="#">
                <img src="https://www.w4u.fr/themes/w4u/images/equipe.png" style="display:block; line-height:0" alt="description de l'image" align="left" border="0" width="750" height="312">
              </a>
            </td>
          </tr>
      </table>

      <p><font style="font-size : 10px;font-family:Arial; color:#948a7c" color="#948a7c">Si vous ne souhaitez plus recevoir d'e-mails de notre part, <a href="desabo" style="font-size : 10px; font-family:Arial; text-decoration:underline; color:#948a7c" color="#948a7c">suivez ce lien.</a></font></p>
    </div>
  </body>
</html>