Points clés à retenir

  • Les emails HTML utilisent des tableaux, pas des div. La plupart des clients de messagerie, en particulier Outlook, ne prennent pas en charge les mises en page CSS modernes. La structure en tableaux reste la norme la plus fiable.
  • Le CSS en ligne est indispensable. De nombreux clients de messagerie suppriment les styles définis dans la section <head> de l’email. Appliquez le CSS directement à chaque élément pour préserver votre design.
  • Le responsive design n’est pas négociable. Plus de la moitié des emails sont ouverts sur mobile. Utilisez des mises en page fluides, des media queries et des polices évolutives pour vous ajuster à toutes les tailles d’écran.
  • Testez avant d’envoyer. Les clients de messagerie n’affichent pas le HTML de la même manière. Un email qui semble parfait dans votre navigateur peut s’afficher de travers dans Outlook 2019 ou Apple Mail. Prévisualisez et testez toujours vos emails.
  • Inutile de partir de zéro. L’éditeur HTML de Benchmark Email vous permet de coller n’importe quel email HTML directement dans la plateforme, puis de l’envoyer.

 

L’email HTML paraît simple, mais c’est loin d’être le cas. Vous connaissez le HTML. Vous avez déjà créé des pages web. Pourtant, dès que vous essayez d’appliquer ces connaissances à un email, quelque chose ne fonctionne plus dans Outlook, votre image disparaît dans Gmail ou votre mise en page s’effondre sur mobile.

La raison est simple : l’email HTML obéit à ses propres règles, et ces règles n’ont pas changé. Ce qui a changé, ce sont les outils qui les entourent. Aujourd’hui, vous pouvez coder vous-même un email élégant et responsive, utiliser un éditeur moderne qui gère la complexité à votre place, ou combiner les deux en important votre propre code HTML directement dans une plateforme comme Benchmark Email et en envoyant vos emails depuis celle-ci.

Ce guide présente tout ce que vous devez savoir sur le code des emails HTML en 2026 : sa structure, comment le rendre responsive, les erreurs à éviter et les bons outils à utiliser pour ne plus avoir à lutter contre votre client de messagerie à chaque envoi.

Pourquoi l’email HTML diffère du HTML classique

En apparence, créer une page web et créer un email HTML se ressemblent. Dans les deux cas, on utilise du HTML et du CSS. Mais les navigateurs web respectent les standards depuis des années, ce qui n’est pas le cas des clients de messagerie.

Outlook utilise toujours le moteur de rendu de Microsoft Word pour afficher le HTML : il ignore donc une bonne partie du CSS moderne. Gmail tronque les emails qui dépassent une certaine taille. Apple Mail ne gère pas les éléments de la même façon que l’application Gmail, sur le même téléphone. Résultat : un email impeccable dans un client de messagerie peut s’afficher de façon complètement cassée dans un autre.

Il ne s’agit pas d’un bug dans votre code. C’est simplement le fonctionnement des clients de messagerie, et c’est pour cette raison que l’email HTML possède ses propres conventions, restées les mêmes alors que le développement web a évolué.

Ces conventions, en bref :

  • Utilisez des tableaux pour la mise en page, et non des <div> , CSS Grid ou Flexbox.
  • Appliquez des styles en ligne à chaque élément plutôt que de vous appuyer sur une feuille de style.
  • Privilégiez les polices web-safe ou définissez des piles de polices de secours à toute épreuve.
  • Utilisez des URL absolues pour toutes les images hébergées en externe.
  • Limitez la taille totale du fichier à moins de 100 Ko pour éviter que Gmail ne tronque votre email.

La structure de base d’un email HTML

Que vous le codiez à la main ou que vous l’exportiez depuis un éditeur, tout email HTML repose sur une structure similaire. Voici à quoi elle ressemble et pourquoi chaque élément compte.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Email Subject</title>
  <style type="text/css">
    /* Responsive styles go here */
    @media only screen and (max-width: 600px) {
      .wrapper { width: 100% !important; }
      .content { padding: 20px !important; }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">
  <!-- Outer wrapper table -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 20px 0;">
        <!-- Inner content table -->
        <table class="wrapper" border="0" cellpadding="0" cellspacing="0"
          width="600" style="background-color: #ffffff; border-radius: 4px;">
          <tr>
            <td class="content" style="padding: 40px;">
              <!-- Your content goes here -->
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Rôle de chaque partie :

  • Le doctype XHTML indique aux anciens clients de messagerie comment interpréter votre code. 
  • La balise meta viewport indique aux navigateurs mobiles comment redimensionner l’email. 
  • Le bloc <style> situé dans la section <head> accueille vos media queries (remarque : tous les clients de messagerie ne le lisent pas, c’est pourquoi les styles en ligne prennent en charge tout le reste). 
  • Le tableau extérieur définit l’arrière-plan, et le tableau intérieur de 600 px correspond à la largeur de contenu standard, compatible avec les clients de messagerie sur ordinateur.

Un exemple pratique de code d’email HTML

Voici un exemple concret de section d’email sur une colonne : un en-tête, un court paragraphe et un bouton CTA. Répétez et empilez ce modèle pour construire un email complet.

<!-- Header image -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" style="padding: 0 0 24px 0;">
      <img src="https://yourdomain.com/header-image.png"
        alt="Your Brand Name"
        width="600"
        style="display: block; max-width: 100%; height: auto;" />
    </td>
  </tr>
</table>
<!-- Headline -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 0 0 16px 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 28px;
                font-weight: bold;
                color: #111111;
                line-height: 1.3;">

      Your headline goes here

    </td>
  </tr>
</table>
<!-- Body text -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="padding: 0 0 24px 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                color: #444444;
                line-height: 1.6;">

      This is your body copy. Keep it short, clear, and focused on one
      message. Every element of this email should point your reader toward
      the action you want them to take.

    </td>
  </tr>
</table>
<!-- CTA Button -->
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center"
        style="border-radius: 4px; background-color: #0066CC;">
      <a href="https://yourdomain.com/your-page"
         target="_blank"
         style="display: inline-block;
                padding: 14px 28px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                font-weight: bold;
                color: #ffffff;
                text-decoration: none;
                border-radius: 4px;">

        Click Here to Learn More

      </a>
    </td>
  </tr>
</table>

Quelques points à noter dans cet exemple :

  • Le bouton est construit à partir d’un tableau, et non d’une balise <div> ou <button>. C’est la méthode la plus fiable pour obtenir un rendu homogène des boutons dans tous les clients de messagerie, y compris Outlook.
  • Tous les styles sont intégrés en ligne. Police, taille, couleur, interligne, remplissage : tout est déclaré directement sur l’élément. Le code est plus verbeux, mais c’est ce qui préserve le design lorsque les clients de messagerie suppriment la balise <head>.
  • Les images ont une largeur explicite et la propriété display: block. Cela évite les espaces indésirables sous les images dans certains clients de messagerie et empêche la mise en page de se décaler au chargement de l’image.
  • Les liens à l’intérieur des boutons ont leur propre style. Ne comptez jamais sur la couleur de l’élément parent pour styliser une balise d’ancrage dans un email.

Rendre votre email HTML responsive

Comme plus de la moitié des emails sont ouverts sur mobile, un design qui ne fonctionne qu’à 600 px n’est pas abouti. Un email HTML responsive repose généralement sur deux techniques : les mises en page fluides et les media queries.

Mises en page fluides

Au lieu d’utiliser des largeurs fixes en pixels pour les éléments internes, utilisez des largeurs en pourcentage afin que les colonnes se réduisent naturellement. Votre conteneur principal peut rester à 600 px, mais tout ce qu’il contient doit s’adapter.

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <!-- Left column -->
    <td width="50%" valign="top"
        style="padding: 0 12px 0 0;">
      <!-- Left content -->
    </td>
    <!-- Right column -->
    <td width="50%" valign="top"
        style="padding: 0 0 0 12px;">
      <!-- Right content -->
    </td>
  </tr>
</table>

Media queries

Pour les écrans de moins de 600 px, vous voudrez généralement empiler les colonnes et augmenter la taille des polices. Les media queries placées dans la balise <head> gèrent cet aspect pour les clients de messagerie qui les prennent en charge (Gmail sur la plupart des plateformes, Apple Mail, iOS Mail).

@media only screen and (max-width: 600px) {
  /* Stack two-column layouts */
  .two-col td {
    display: block !important;
    width: 100% !important;
    padding: 0 0 16px 0 !important;
  }
  /* Larger body text on small screens */
  .body-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
  /* Full-width CTA button */
  .cta-button {
    width: 100% !important;
    text-align: center !important;
  }
}

Ajoutez les noms de classe correspondants à vos éléments de tableau (class=”two-col”, class=”body-text” (corps du texte), etc.) : ces styles s’appliquent alors sur mobile, tandis que les styles en ligne gèrent l’affichage sur ordinateur.

Les erreurs courantes à éviter dans vos emails HTML

  • Utiliser des images d’arrière-plan dans Outlook. Outlook ignore les images d’arrière-plan CSS sur la plupart des éléments. Utilisez plutôt des balises <img> , ou recourez à la solution de contournement VML de Microsoft si une image d’arrière-plan est indispensable.
  • S’appuyer sur JavaScript. Aucun client de messagerie n’exécute JavaScript. Toute fonctionnalité interactive doit se trouver sur une landing page, et non dans l’email lui-même.
  • Ne pas définir alt (texte alternatif). De nombreux clients de messagerie bloquent les images par défaut. Si votre texte alternatif est vide, vos lecteurs ne voient que des cadres vides, sans aucune indication sur leur contenu.
  • Intégrer des polices depuis Google Fonts ou des sources personnalisées. Les polices web fonctionnent dans Apple Mail et dans quelques autres clients de messagerie, mais échouent sans avertissement dans beaucoup d’autres. Définissez toujours des polices de secours : font-family: ‘Your Font’, Georgia, serif;.
  • Oublier la version texte brut. La plupart des plateformes d’email marketing envoient une version texte brut en complément de votre HTML. Si la vôtre ne la génère pas automatiquement, rédigez-la vous-même. Elle est importante pour la délivrabilité et l’accessibilité.
  • Dépasser 100 Ko. Gmail tronque les emails qui dépassent ce seuil et masque votre contenu derrière un lien « Afficher l’intégralité du message ». Allégez votre HTML et hébergez vos images en externe plutôt que de les intégrer.

Outils pour créer des emails HTML en 2026

Plusieurs options s’offrent à vous, selon votre envie de mettre les mains dans le code.

Codage manuel

Si vous maîtrisez le HTML et le CSS, le codage manuel vous offre un contrôle total. Utilisez un éditeur de code moderne (VS Code, Sublime Text ou équivalent) et associez-le à un outil de prévisualisation en local. Le framework MJML mérite le détour si vous souhaitez un balisage plus facile à maintenir, que vous pouvez compiler en HTML compatible avec les emails. Il prend en charge pour vous une grande partie du code répétitif lié aux tableaux.

Outils de design spécialisés pour l’email

Des plateformes comme Litmus et Email on Acid vous permettent de prévisualiser votre code HTML sur des dizaines de clients de messagerie avant l’envoi. Elles sont particulièrement utiles pour contrôler la qualité d’un modèle codé à la main.

L’éditeur HTML de Benchmark Email

Si vous avez déjà créé un email HTML, qu’il soit codé à la main, exporté depuis un outil de design ou issu d’une bibliothèque de modèles, l’éditeur HTML de Benchmark Email vous permet de coller ce code directement dans la plateforme et de l’envoyer à votre liste.

Voici comment procéder :

  1. Copiez le code HTML de votre fichier email ou de votre modèle.
  2. Dans Benchmark Email, créez une nouvelle campagne et sélectionnez l’option éditeur HTML.
  3. Collez votre code HTML dans l’éditeur.
  4. Prévisualisez l’email sur différents appareils pour vérifier que tout s’affiche correctement.
  5. Envoyez-le à votre liste comme n’importe quelle autre campagne.

Vous profitez de toute l’infrastructure d’envoi de Benchmark Email, y compris les outils de délivrabilité , la gestion des listes, le suivi des ouvertures et des clics ainsi que les rapports, sans avoir à recréer votre email dans un éditeur glisser-déposer. Si vous avez déjà investi du temps dans un modèle personnalisé, c’est le moyen le plus rapide de le mettre à profit.

L’éditeur HTML comprend également une vue code : vous pouvez ainsi faire des retouches rapides, modifier le texte, mettre à jour un lien ou remplacer l’URL d’une image, sans quitter la plateforme.

Utiliser l’IA pour écrire le code d’un email HTML

Les outils de codage basés sur l’IA ont rendu le codage manuel des emails HTML nettement plus accessible. Si vous savez ce que vous voulez sans être à l’aise pour écrire du HTML en tableaux à partir de zéro, des outils comme ChatGPT, Claude et GitHub Copilot peuvent générer une structure d’email fonctionnelle à partir d’une simple description en langage courant. Et c’est plus rapide que de fouiller dans la documentation chaque fois que vous avez besoin d’une mise en page sur deux colonnes ou d’un bouton bulletproof.

Quelques façons dont l’IA vous aide à créer des emails HTML:

Générer un modèle de base. Décrivez la structure de votre email (« une image d’en-tête, une section sur deux colonnes et un bouton CTA, sur une seule colonne sur mobile ») et un outil d’IA produira un squelette HTML en tableaux que vous pourrez ensuite modifier. Vous gagnez du temps sur la mise en place et passez plus vite à la personnalisation.

Écrire des composants spécifiques. Vous avez besoin d’un arrière-plan VML bulletproof pour Outlook, ou d’un texte de prévisualisation masqué visuellement mais affiché dans l’aperçu de la boîte de réception ? Ces modèles sont bien documentés et l’IA les gère de façon fiable : vous n’avez donc plus besoin de rechercher la syntaxe exacte à chaque fois.

Déboguer du code défectueux. Collez une section de HTML défectueuse dans un chat d’IA et demandez ce qui ne va pas. Les outils d’IA savent repérer les balises non fermées, les styles en ligne manquants ou les attributs non pris en charge par les clients de messagerie, surtout quand vous avez 300 lignes de balisage en tableaux sous les yeux sans parvenir à trouver le problème.

Convertir du HTML classique en HTML compatible email. Si vous souhaitez adapter la mise en page d’une page web en email, l’IA peut vous aider à réécrire la structure CSS Grid ou Flexbox en équivalents à base de tableaux, l’une des étapes les plus fastidieuses de la conversion.

Une mise en garde s’impose : le code d’email HTML généré par l’IA est un excellent point de départ, pas un produit fini. Testez toujours le code généré par l’IA sur de vrais clients de messagerie avant l’envoi, car les outils d’IA produisent parfois des structures qui fonctionnent dans les navigateurs mais pas dans Outlook, ou génèrent un balisage trop complexe qui ne se compresse pas proprement. Servez-vous de l’IA pour accélérer le processus, puis validez le code avec votre processus de test habituel.

Tester votre email HTML avant l’envoi

Même si vous codez avec le plus grand soin, tester votre email sur de vrais clients de messagerie reste le seul moyen de savoir s’il fonctionne vraiment. Voici quelques approches :

Utilisez un outil de prévisualisation. Litmus et Email on Acid génèrent tous deux des captures d’écran de votre email dans plus de 90 clients de messagerie. Si vous envoyez régulièrement des emails à une audience variée, l’investissement en vaut la peine.

Envoyez-vous un test. Avant d’envoyer une campagne, adressez un test à votre propre boîte de réception et vérifiez-le au moins dans Gmail, Apple Mail et Outlook. Ces trois clients de messagerie couvrent la majorité de vos abonnés.

Vérifiez l’affichage sur mobile. Ouvrez l’email de test sur votre téléphone. Vérifiez la taille des polices, les zones tactiles des boutons et le bon empilement des mises en page à deux colonnes.

Vérifiez vos liens. Cliquez sur chaque lien de l’email de test. Il est facile d’oublier une URL provisoire ou de laisser une faute de frappe dans un paramètre UTM, et ces erreurs sautent aux yeux une fois l’email envoyé.

Relisez la version en texte brut. Si votre plateforme la génère automatiquement, vérifiez qu’elle se lit facilement et qu’elle contient tous les liens importants.

Questions fréquentes

Qu’est-ce qu’un email HTML et en quoi se distingue-t-il d’un email en texte brut ?

Un email HTML utilise un langage de balisage pour contrôler la mise en page, les polices, les couleurs, les images et les boutons, ce qui vous permet de proposer une expérience soignée et à l’image de votre marque. Un email en texte brut porte bien son nom : aucune mise en forme, uniquement du texte. La plupart des emails marketing sont en HTML, mais chaque campagne HTML devrait aussi disposer d’une version alternative en texte brut, pour la délivrabilité et l’accessibilité.

Faut-il savoir coder pour envoyer un email HTML ?

Non. Les éditeurs d’emails par glisser-déposer comme Benchmark Email génèrent un code HTML propre en arrière-plan. Si vous disposez déjà d’un modèle HTML que vous souhaitez utiliser, l’éditeur HTML de Benchmark Email vous permet de le coller et de l’envoyer directement, sans avoir à coder vous-même.

Pourquoi faut-il utiliser des tableaux dans un email HTML plutôt que du CSS moderne ?

Les clients de messagerie, en particulier Outlook sous Windows, utilisent d’anciens moteurs de rendu qui ne prennent en charge ni CSS Grid, ni Flexbox, ni de nombreuses propriétés de mise en page modernes. Depuis plus de dix ans, les tableaux sont la solution de repli fiable pour la mise en page des emails, et ce sont toujours eux qui offrent le rendu le plus homogène d’un client de messagerie à l’autre.

Comment rendre mon email HTML responsive ?

Utilisez une mise en page fluide avec des largeurs en pourcentage pour les éléments internes, définissez votre max-width à 600 px et ajoutez des media queries dans la balise <head> pour les ajustements propres au mobile, comme l’empilement des colonnes ou l’agrandissement des polices. Veillez aussi à ce que vos images se redimensionnent avec max-width: 100%; height: auto; afin qu’elles ne débordent pas sur les petits écrans.

Quelle est la taille maximale d’un email HTML ?

Faites en sorte que votre fichier HTML pèse moins de 100 Ko. Gmail tronque les emails qui dépassent cette limite et masque une partie du contenu derrière un lien « Afficher l’intégralité du message ». Hébergez vos images en externe plutôt que de les intégrer en base64, et gardez un code propre, sans commentaires ni espaces superflus.

Puis-je utiliser mon propre modèle HTML dans Benchmark Email ?

Oui. L’éditeur HTML de Benchmark Email est conçu précisément pour cela. Copiez votre code HTML, collez-le dans l’éditeur, prévisualisez-le, puis envoyez-le. Vous profitez de toutes les fonctionnalités d’envoi et de reporting de Benchmark Email avec votre propre design personnalisé.

Bio de l'auteur :

by Jessica Lunk

High level marketing, technical email topics, email trends | Jessica Lunk is the VP of Growth Marketing at Benchmark Email, where she combines strategic flair with hands-on expertise to help busy marketers elevate their email game. Delivering timely insights on list hygiene, ROI, and email deliverability, she’s a go-to voice for practical marketing wisdom.