Skip to content
📧 Comment insérer du HTML dans un email Outlook Web : méthode fonctionnelle en 2026

📧 Comment insérer du HTML dans un email Outlook Web : méthode fonctionnelle en 2026

Vous avez conçu un email HTML avec des tableaux, des boutons et un logo d’entreprise, mais Outlook Web le transforme en un fatras de chevrons. Ctrl+V supprime le balisage et affiche des <td> et <div> bruts à la place de votre design. Il n’y a pas de bouton «coller le HTML» dans la version navigateur, et il n’y en a jamais eu.

Une solution de contournement existe et prend quelques minutes: un marqueur unique dans le corps du message associé aux Outils de développement du navigateur. Pas d’extension, pas d’API, pas de compte développeur.

Une mise en garde d’emblée, que la plupart des tutoriels passent sous silence: Microsoft ne documente ni ne prend en charge cette méthode. Elle repose sur le fait que le champ de saisie du message est un bloc contenteditable ordinaire et non un composant protégé. Cela fonctionne depuis des années, mais Microsoft ne donne aucune garantie. C’est pourquoi cet article inclut une étape obligatoire «envoyez-vous un test» et une section sur les alternatives officielles en 2026.

💡 Aperçu rapide:

  • Créez un brouillon dans Outlook Web et tapez un marqueur unique ForHTMLEmail dans le corps
  • Ouvrez les Outils de développement (F12), trouvez le marqueur dans la recherche DOM et sélectionnez Modifier en tant que HTML
  • Remplacez le marqueur par votre code HTML cible et appuyez sur Ctrl+Entrée
  • Envoyez-vous l’email. Assurez-vous que le balisage parvient bien au destinataire avant de l’envoyer à quiconque

Ce qui a changé d’ici 2026

Les instructions vieilles de cinq ans sont dépassées sur trois points importants. Avant d’ouvrir les Outils de développement, comprenez le nouveau paysage.

Le nouvel Outlook, c’est Outlook Web. Microsoft remplace l’Outlook classique pour Windows par le «nouvel Outlook» (projet Monarch). Techniquement, il s’agit d’un wrapper natif sur WebView2 qui exécute la même interface web en interne. Conséquence pratique: la technique décrite ci-dessous s’applique non seulement au navigateur, mais aussi au client vers lequel Microsoft oriente tous les utilisateurs.

Outlook classique est encore vivant, mais en sursis. Microsoft s’engage à prendre en charge les installations existantes d’Outlook classique au moins jusqu’en 2029, et la migration forcée a été repoussée: pas avant 2027-2028. Office 2016 et 2019 ont perdu leur support le 14 octobre 2025, Office 2021 le 13 octobre 2026.

«Insérer → Fichier en tant que texte» n’existe que dans la version classique. L’ancienne méthode pour coller du HTML sans les Outils de développement (le bouton «Joindre un fichier» → «Insérer en tant que texte») demeure, mais uniquement dans Outlook classique, et le bouton doit être ajouté manuellement à la barre d’outils Accès rapide. Dans le nouvel Outlook et la version navigateur, cette option n’existe tout simplement pas. Toutes les recettes impliquant des macros VBA et des compléments COM sont également mortes: elles ne fonctionnent pas dans le nouvel Outlook.

Attention, piège à éviter. Dans le nouvel Outlook de bureau, vous ne pouvez plus ouvrir les Outils de développement: la commande olk.exe --devtools a été intentionnellement désactivée. Faites tout dans le navigateur, sur outlook.live.com ou outlook.office.com.

Ce dont vous avez besoin

  • Un navigateur Chromium. Chrome, Edge, Brave, Opera, Vivaldi. Dans Firefox, le mécanisme est le même, seul l’onglet s’appelle Inspecteur.
  • Un compte Outlook. Personnel outlook.live.com ou professionnel outlook.office.com, le mécanisme ne diffère pas.
  • Du HTML prêt avec des styles en ligne. Conservez la source dans un fichier séparé: si l’onglet se ferme, la manipulation prend trente secondes à refaire.

Pourquoi les styles en ligne et les tableaux restent obligatoires

La tentation est forte: puisque le nouvel Outlook fonctionne sur Chromium, vous pourriez utiliser flexbox pour la mise en page. Pas si vite.

L’email est rendu par le client de messagerie du destinataire, pas le vôtre. Tant qu’Outlook classique est vivant (et il l’est jusqu’en 2029), certains destinataires ouvrent les emails avec le moteur Word: pas de flexbox, pas de CSS Grid, pas d’images de fond, pas de polices web, et margin est ignoré. Même là où display: flex passe formellement, les propriétés associées (flex-wrap, align-items, justify-content) sont supprimées par la plupart des clients.

La conclusion en 2026 n’a pas changé: mise en page par tableaux, styles en ligne, largeur fixe de 600 pixels. Les blocs <style> externes et <link rel="stylesheet"> sont ignorés par Outlook Web.

1. Créez un brouillon et placez un marqueur

Ouvrez Outlook Web, cliquez sur «Nouveau message». Ne remplissez pas encore l’objet ni les destinataires, c’est une sécurité contre l’envoi accidentel d’un brouillon avec le marqueur.

Cliquez dans le corps du message et tapez exactement un mot: ForHTMLEmail. Pas d’espaces ni de guillemets, la casse est importante. Le marqueur doit être le seul contenu du corps: une combinaison de caractères unique garantit que la recherche aboutira dans le corps du message et non dans un élément de l’interface.

Fenêtre de nouveau message dans Outlook Web : corps du message vide, objet et destinataires non renseignés

2. Trouvez le marqueur dans le DOM

Sans fermer la fenêtre du message, appuyez sur F12 et allez dans l’onglet Éléments.

Panneau DevTools ouvert sur Outlook Web : onglet Éléments avec l'arborescence DOM du message

Appuyez sur Ctrl+F à l’intérieur du panneau des Outils de développement (pas sur la page), une recherche DOM s’ouvrira. Tapez ForHTMLEmail et appuyez sur Entrée. Les Outils de développement mettront en surbrillance le nœud recherché: généralement un <div> ou un <p> imbriqué sur plusieurs niveaux de tableaux. Trouvez l’élément où ForHTMLEmail est le contenu texte direct, sans balises enfants.

3. Remplacez le marqueur par le HTML

Faites un clic droit sur l’élément trouvé et sélectionnez Modifier en tant que HTML. Ou appuyez sur F2 sur l’élément sélectionné, c’est plus rapide.

Le champ d’édition s’agrandira: vous verrez quelque chose comme <p>ForHTMLEmail</p>.

Sélectionnez tout le contenu du champ et supprimez-le. C’est le moment clé: si vous n’effacez pas l’ancien contenu, le HTML se superposera au marqueur et vous obtiendrez un désordre.

Mode Modifier en HTML dans DevTools : code HTML de l'email collé à la place du marqueur

Collez maintenant votre code avec Ctrl+V. Ne cliquez pas en dehors du champ avec la souris, cela fermerait le mode édition avant d’avoir validé la modification. Si les Outils de développement ont coloré les balises et affiché l’imbrication sous forme d’arborescence, le code a été interprété comme du balisage, pas comme du texte brut.

Appuyez sur Ctrl+Entrée. Revenez à la fenêtre du message: la mise en page devrait s’afficher directement dans le corps, images, tableaux, fond, boutons.

Email HTML finalisé affiché dans le corps du message Outlook Web : tableaux, images et bouton

4. Test obligatoire avant envoi

Cette étape est souvent sautée, et les gens envoient ensuite un email vide à leurs clients. La méthode n’est pas officielle, alors faites confiance, mais vérifiez.

  • Envoyez-vous l’email. Saisissez votre adresse, envoyez-le, ouvrez votre boîte de réception. C’est seulement à ce moment-là que vous serez sûr que le DOM modifié est bien parti vers le serveur et n’est pas resté une illusion locale du navigateur.
  • Ouvrez-le sur un téléphone et dans un autre client. Au moins dans Gmail. Si la mise en page y est cassée, elle le sera pour la moitié de vos destinataires.
  • Regardez-le sans les images. Outlook bloque les images externes par défaut. L’email doit rester lisible: textes alternatifs, couleurs de fond, pas de texte sous forme d’image.
  • Remplissez seulement maintenant les destinataires et l’objet.

Stewart Gauld montre à quoi ressemble tout le processus en une seule exécution. La vidéo a été enregistrée avant l’apparition du nouvel Outlook, mais le mécanisme du marqueur et la fonction Modifier en tant que HTML n’ont pas changé depuis.

Alternatives officielles si les Outils de développement ne sont pas une option

La méthode des Outils de développement ne coûte rien, mais elle n’est pas officielle et demande une intervention manuelle. Si vous devez coller du HTML régulièrement ou qu’une personne non technique s’en chargera, il existe des voies légales en 2026.

Méthode

Adaptée pour

Nuance

Complément Outlook (Office.js body.setAsync)

Développeurs

API officielle, limite de 1 000 000 caractères par insertion. Fonctionne à la fois dans le web et le nouvel Outlook

Complément prêt à l’emploi d’AppSource («Insert HTML by Designmodo»)

Utilisateurs non techniques

Vérifié par Microsoft, s’installe depuis le store. Principal remplacement des Outils de développement

Extension de navigateur (HTMaiL)

Ceux qui vivent dans le navigateur

Tiers, environ 30 000 utilisateurs. Évaluez les risques: l’extension obtient l’accès à la messagerie

API Microsoft Graph (sendMail, contentType: HTML)

Automatisation et envois en masse depuis du code

Nécessite un jeton. HTML non sécurisé filtré par défaut

Outlook classique: «Insérer en tant que texte»

Ceux encore sur la version classique

Le bouton doit être ajouté manuellement à la barre d’outils. Aucune méthode dans le nouvel Outlook

À part: les «Mes modèles» intégrés pour le HTML ne fonctionneront pas, ils enregistrent uniquement le texte, sans mise en forme ni images.

Pièges en 2026

  • Les scripts ne passeront pas. Microsoft supprime le HTML potentiellement dangereux, <script>, les formulaires, l’interactivité. Ce n’est pas une nouveauté de 2026, c’est la protection XSS, et vous ne pouvez pas la contourner via les Outils de développement non plus: le filtrage a lieu sur le serveur.
  • Taille de l’email. Gardez le HTML dans une limite de 80 à 100 Ko. Gmail tronque les messages à environ 102 Ko et masque le reste derrière un lien «Afficher l’intégralité du message».
  • Thème sombre. Outlook.com inverse partiellement les couleurs lui-même. Ajoutez <meta name="color-scheme" content="light dark"> et <meta name="supported-color-schemes" content="light dark">, mais il n’existe aucun moyen infaillible d’empêcher l’inversion, Microsoft le reconnaît lui-même.
  • Cyrillique. Placez <meta charset="UTF-8"> au début du modèle, sinon vous obtiendrez des caractères illisibles.
  • Version texte brut. Via les Outils de développement, vous ne contrôlez pas la partie texte brut: Outlook la générera lui-même à partir du HTML. Pour les envois critiques, c’est un argument en faveur d’un service d’envoi professionnel.

⁉️🤔 Foire aux questions

Pourquoi Outlook Web ne permet-il pas de coller directement du HTML?

Avec un Ctrl+V classique, le navigateur transmet les données en text/plain, pas en text/html, c’est une protection contre l’injection de balisage malveillant. Les Outils de développement contournent la barrière car ils modifient directement le DOM, et le champ de saisie du message est un bloc contenteditable ordinaire. Microsoft ne cache aucun «bouton secret»: un moyen officiel de coller du HTML arbitraire dans la version web n’est tout simplement pas prévu.

La méthode fonctionne-t-elle encore en 2026?

Des tutoriels récents de 2024-2025 la décrivent, et il n’y a pas de changements techniques visibles qui la casseraient. Mais Microsoft ne documente pas la méthode et ne promet pas de la prendre en charge: l’éditeur d’Outlook Web est construit sur RoosterJS avec un modèle de contenu interne, et théoriquement il pourrait écraser le HTML collé. C’est exactement pour cela que l’étape «envoyez-vous l’email» n’est pas optionnelle. Vérifié, puis envoyé.

Cela fonctionne-t-il dans le nouvel Outlook pour Windows?

Dans l’application de bureau elle-même, non: les Outils de développement y ont été intentionnellement désactivés. Mais le nouvel Outlook est un wrapper sur la même interface web, donc ouvrez simplement outlook.office.com dans un navigateur, composez-y l’email et envoyez-le. Le résultat est identique.

Le HTML sera-t-il sauvegardé si vous fermez le brouillon?

Non. La modification vit dans le DOM de l’onglet actuel. Le corps modifié ne parvient au serveur qu’à l’envoi (ou lorsque le brouillon s’enregistre automatiquement, mais ne comptez pas là-dessus). Fermez l’onglet et vous retrouverez un brouillon avec le marqueur ForHTMLEmail. Conservez le HTML source dans un fichier.

Peut-on désormais mettre en page les emails avec flexbox puisque le nouvel Outlook est sur Chromium?

Non. Votre client ne décide pas de ce qui affichera l’email chez le destinataire. Tant qu’Outlook classique avec le moteur Word est vivant (et Microsoft le prend en charge au moins jusqu’en 2029), certains destinataires verront une mise en page cassée. Les tableaux et les styles en ligne restent la norme au moins jusqu’à la fin de la décennie.

Le HTML ne se colle pas, que vérifier?

Trois causes typiques. Premièrement: les Outils de développement ne trouvent pas le marqueur, faute de frappe ou espace en trop, retapez ForHTMLEmail depuis zéro. Deuxièmement: un amas de balises dans l’email, vous n’avez pas effacé le contenu du champ avant de coller, faites Ctrl+Z et recommencez. Troisièmement: après Ctrl+Entrée, l’email est vide, les Outils de développement ont rejeté la modification à cause d’une erreur de balisage (balise non fermée, guillemet non apparié). Passez le code au Validateur W3C.

En résumé: deux règles qui décident de tout

L’ensemble du processus tient en une chaîne: marqueur → F12 → trouver dans le DOM → Modifier en tant que HTML → coller → Ctrl+Entrée → envoyez-vous le message → vérifiez → envoyez.

Deux règles sans lesquelles la méthode échoue:

  • Le test à vous-même n’est pas optionnel. La méthode n’est pas officielle. Tant que l’email n’est pas arrivé dans votre boîte de réception sous une forme normale, partez du principe qu’il ne fonctionne pas.
  • Tableaux et styles en ligne. Chromium sous le capot du nouvel Outlook n’annule pas Outlook classique chez le destinataire.

Si vous collez du HTML chaque semaine, intéressez-vous au complément d’AppSource: il fait la même chose, mais de manière légale et en deux clics. Pour les tâches ponctuelles, les Outils de développement restent le plus rapide.

Quels emails envoyez-vous via Outlook Web et à quelle fréquence la mise en page se casse-t-elle chez les destinataires? Écrivez-le dans les commentaires.