La réponse courte
Un HTML propre, c'est un HTML dont les balises décrivent ce qu'est le contenu (un titre, un paragraphe, une liste, un tableau, un lien) et rien de son apparence dans Word. Pas de noms de police, pas de tailles en points, pas de couleurs, pas de classes comme MsoNormal, pas de span vides. Ce HTML s'adapte à la feuille de style de votre site et reste facile à modifier ensuite.
Word ne sait pas le produire seul, car son export cherche à reproduire la page à l'identique. Un convertisseur fondé sur la structure lit le document dans l'autre sens : il regarde quel style utilise chaque paragraphe et l'associe à une balise. Déposez un .docx sur le convertisseur ci-dessous, laissez Convertir en sur HTML, vérifiez l'aperçu à côté du code, puis appuyez sur Copier ou Télécharger.
Essayez ici : Word en HTML
Ouvrir la page complète de l'outilPourquoi le HTML de Word est si chargé
Word propose, dans Enregistrer sous, les types Page Web et Page Web filtrée. Les deux visent à faire ressembler le HTML à la page imprimée, ils écrivent donc chaque détail visuel dans le code. Un seul petit paragraphe peut devenir plusieurs lignes de balisage avec une classe, un attribut style listant la police, la taille et les espacements, et des span imbriqués à chaque changement de mise en forme.
Copier depuis Word et coller dans un système de gestion de contenu fait à peu près la même chose via le presse-papiers : l'éditeur reçoit le HTML de Word et conserve tout ou partie de ces styles. Résultat : un texte qui ne ressemble pas au reste du site, des polices qui changent d'un paragraphe à l'autre et des pages difficiles à modifier, car la mise en forme invisible revient sans cesse.
| Méthode | Titres et listes | Styles en ligne et balises Office | Images |
|---|---|---|---|
| Enregistrer en Page Web | Conservés, en paragraphes stylés | Beaucoup, plus des balises propres à Office | Dossier séparé |
| Enregistrer en Page Web filtrée | Conservés, en paragraphes stylés | Moins, mais classes et CSS en ligne restent | Dossier séparé |
| Copier-coller dans un CMS | Dépend de l'éditeur | Souvent conservés | Souvent perdues ou liées à des fichiers locaux |
| Google Docs, Télécharger en Page Web | Conservés | Classes générées et un bloc de styles | Dossier séparé dans un ZIP |
| Convertisseur de cette page | Vrais h1 à h6, ul, ol | Aucun | Intégrées, ou laissées de côté |
Ce qui est conservé et ce qui est supprimé
Le convertisseur garde tout ce qui porte du sens et laisse de côté tout ce qui ne règle que l'apparence :
- Conservé : les titres des styles Word Titre 1 à Titre 6, le style Titre du document (en h1) et Sous-titre (en h2), les paragraphes, le gras et l'italique (en strong et em), les listes à puces et numérotées avec leurs niveaux, les tableaux, les liens, les notes de bas de page, les citations au style Citation et les images.
- Supprimé : les polices, tailles de police, couleurs, surlignages, alignements, interlignes, marges de page, en-têtes et pieds de page, ainsi que les commentaires de Word.
- Images : avec Inclure les images coché, elles sont intégrées au HTML sous forme de data URI, et le code fonctionne seul. Décochez l'option pour obtenir un code plus léger si vous envoyez les images séparément dans votre CMS.
- Page HTML complète : cochez-la pour obtenir un fichier complet avec doctype, jeu de caractères et titre, qui s'ouvre seul dans un navigateur. Laissez-la décochée si vous collez le contenu dans une page existante.
Préparer le document pour un résultat le plus propre possible
Le résultat ne peut pas être plus structuré que le document. La surprise la plus fréquente est un titre qui ressort en paragraphe normal en gras. Cela arrive quand quelqu'un a grossi et mis en gras le texte à la main au lieu d'utiliser un style de titre ; Word l'affiche comme un titre, mais le fichier dit que c'est un paragraphe normal.
- Utilisez les styles intégrés de Word : sélectionnez la ligne et choisissez Titre 1, Titre 2 et ainsi de suite dans la galerie Styles de l'onglet Accueil.
- Utilisez de vraies listes. Les lignes qui commencent par un tiret ou un numéro tapé à la main deviennent des paragraphes, pas des éléments de liste ; utilisez plutôt les boutons Puces et Numérotation.
- Évitez les paragraphes vides pour créer de l'espace. Chaque appui sur Entrée sur une ligne vide devient un paragraphe vide.
- Gardez des tableaux simples : une ligne d'en-tête, pas de cellules fusionnées si possible, et pas de tableaux utilisés seulement pour la mise en page.
- Les styles personnalisés sans équivalent HTML sont convertis en paragraphes normaux, et le convertisseur vous le signale par une courte note sous le résultat.
Coller le HTML dans WordPress, Shopify et d'autres éditeurs
La plupart des éditeurs ont une vue code ou HTML. Passez-y avant de coller ; si vous collez du HTML dans la vue visuelle, l'éditeur affiche les balises comme du texte. Dans l'éditeur de blocs de WordPress, ajoutez un bloc HTML personnalisé, ou ouvrez le menu du bloc et choisissez Modifier en HTML. Dans l'éditeur classique et dans l'éditeur de description de Shopify, utilisez l'onglet Texte ou le bouton Afficher le HTML.
Comme le code ne contient aucun style en ligne, le texte prend tout de suite les polices, tailles et couleurs de votre thème. Si un niveau de titre paraît trop grand pour votre design, changez la balise (h2 en h3, par exemple) plutôt que d'ajouter un style, pour que la structure de la page reste correcte pour les moteurs de recherche et les lecteurs d'écran.
Pour les modèles d'e-mail, un HTML propre est un bon point de départ, mais beaucoup de logiciels de messagerie ont besoin de styles en ligne pour un affichage homogène. Ajoutez-les dans votre outil d'e-mailing, pas dans Word.
Problèmes fréquents
- Le fichier est en .doc, pas en .docx : le convertisseur ne lit que le .docx. Ouvrez le fichier dans Word ou LibreOffice, enregistrez-le en .docx et réessayez.
- Les titres manquent : ils ont été mis en forme à la main. Appliquez les styles de titre dans Word et convertissez à nouveau.
- Le HTML est très lourd : les images intégrées en représentent l'essentiel, et une data URI pèse environ un tiers de plus que le fichier image. Décochez Inclure les images et envoyez les images séparément.
- Des zones de texte, formes ou SmartArt manquent ou sont dans le désordre : ce sont des objets de dessin, pas du texte dans le fil du document. Déplacez le texte important dans des paragraphes normaux avant de convertir.
- Des caractères spéciaux s'affichent mal après le collage : enregistrez ou servez le HTML en UTF-8. L'option de page complète inclut déjà la déclaration UTF-8.
Confidentialité et sécurité
Contrats, devis et documents internes ne devraient pas être envoyés à des convertisseurs inconnus. Ici, le .docx est ouvert et converti dans votre navigateur, et le document ne quitte jamais votre appareil. Une fois la page ouverte une première fois, elle fonctionne aussi hors ligne.
Le HTML produit est vérifié à l'aide d'une liste de balises autorisées : scripts, attributs d'événement et liens javascript: ne peuvent jamais se retrouver dans le résultat, même si le document en contenait.