Formateur & embellisseur HTML, gratuit

Qu'est-ce que le formatage HTML ?

Le formatage HTML (aussi appelé « beautification » ou « pretty-printing ») est l'inverse de la minification. Un formateur prend du HTML sous n'importe quelle forme, sortie de production minifiée, copié-collé depuis l'inspecteur d'un navigateur, généré par un moteur de template, ou simplement mal écrit à la main, et le ré-émet avec une indentation cohérente, des sauts de ligne entre éléments de bloc et une structure visuelle prévisible. Les navigateurs ignorent les espaces blancs supplémentaires lors du parsing, donc le formatage change l'apparence du source mais jamais le rendu de la page. Pourquoi s'embêter ? Parce que l'œil humain parse une hiérarchie indentée plus vite qu'une soupe de balises visuellement plate. La revue de code, le débogage, l'apprentissage de la structure HTML, le passage du balisage à un autre développeur, la comparaison de deux versions pour des changements, tout devient substantiellement plus facile quand l'arbre du document est visuellement évident d'après l'indentation.

Les cinq workflows réels où un formateur gagne sa place : (1) HTML de production minifié collé depuis « Afficher la source » d'un navigateur ou « Copy outer HTML » des DevTools de retour dans un débogueur ; (2) HTML extrait d'un textarea CMS où l'éditeur WYSIWYG a produit une sortie visuellement propre mais un source désordonné ; (3) débogage de sortie de moteur de template (Jinja, Twig, Handlebars, ERB) où le HTML rendu ne correspond pas à ce que vous attendiez ; (4) conversion de HTML auto-généré (depuis du rendu côté serveur React, Pandoc, des convertisseurs de documents) en une forme lisible pour la revue de code ; (5) nettoyage de HTML de modèle d'e-mail avant soumission à une plateforme marketing qui pourrait dépouiller votre formatage à l'import.

Les principaux formateurs HTML

js-beautify (Einar Lielmanis, à partir de 2007) est le formateur de longue date de l'écosystème JavaScript, gère HTML, CSS, JavaScript et JSON avec une seule bibliothèque. Le formateur HTML est ce qui alimente la façade publique de beautifier.io et ce qui a historiquement soutenu des dizaines de sites « format HTML online ». Prettier (James Long, 2017) est le formateur opinioné qui en est venu à dominer l'écosystème frontend moderne ; le support HTML a atterri peu après le lancement. La philosophie de design de Prettier est « presque pas de configuration », un style d'indentation (2 espaces par défaut), une cible de largeur de ligne (printWidth: 80), un ensemble de règles d'enveloppement d'attributs. Le compromis est la cohérence entre équipes sans bikeshedding ; le coût est moins de flexibilité personnelle. HTML Tidy (Dave Raggett au W3C en 1997, désormais maintenu par HTACG) est l'original, il précède la scène moderne des formateurs web et était à l'origine conçu pour nettoyer de l'HTML ancien, cassé, déprécié de la fin des années 1990. Tidy est encore livré sur macOS par défaut (/usr/bin/tidy) et sur la plupart des distributions Linux ; moins couramment utilisé en 2026 mais toujours respecté pour sa rigueur. Dans un workflow moderne, Prettier est le défaut pour les nouveaux projets, intégré dans VS Code (formateur par défaut pour les fichiers HTML), les IDE JetBrains, et les hooks de pré-commit via Husky + lint-staged. Cet outil est pour les cas où vous n'avez pas de pipeline de build exécutant Prettier, coller, formater, copier.

Conventions d'indentation

Trois styles d'indentation se disputent en HTML moderne. 2 espaces est le défaut web moderne, utilisé par le HTML/CSS Style Guide de GitHub, le Google HTML/CSS Style Guide, le défaut de Prettier, les exemples de style WHATWG et la plupart des paquets front-end publiés sur npm. L'argument : HTML s'imbrique profondément (un composant typique peut avoir 6-10 niveaux d'indentation), et 2 espaces empêchent les lignes de courir au-delà du bord droit d'un affichage 80 colonnes. 4 espaces est l'ancienne tradition Java / Microsoft qui survit dans certains projets legacy et le standard PHP PSR-12 ; produit une hiérarchie visuellement plus claire au prix de l'espace horizontal. Les tabulations sont privilégiées par la communauté du noyau Linux, certains projets Go, et les développeurs qui argumentent que les caractères tab permettent à chaque lecteur de définir sa propre préférence de largeur visuelle. L'argument « tabs vs espaces » est plus vieux que la plupart des lecteurs et impossible à gagner ; la réponse pratique est d'en choisir un par projet et laisser votre formateur l'imposer. Cet outil propose les trois.

Éléments inline vs bloc, le piège des espaces

Le plus gros piège du formatage HTML est la distinction entre éléments de niveau bloc et inline. Les éléments de bloc (<div>, <p>, <section>, <article>, <ul>) coulent comme des blocs style paragraphe ; les espaces entre eux ne rendent rien de visible, donc un formateur peut librement ajouter sauts de ligne et indentation autour d'eux. Les éléments inline (<span>, <a>, <strong>, <em>, <code>) coulent dans le texte ; les espaces entre eux SONT rendus. Considérez <p>Hello <strong>world</strong>!</p> : l'espace entre « Hello » et l'ouverture de <strong> est un vrai caractère espace qui apparaîtra entre les mots. Si un formateur naïf casse cette ligne et indente <strong> sur sa propre ligne, la sortie rendue gagne silencieusement des espaces visibles et peut maintenant se lire « Hello world » avec un espace supplémentaire. Pire, les formateurs qui suppriment les espaces entre éléments inline peuvent fusionner des mots adjacents : « Helloworld » sans espace. L'option « préserver les balises inline » (activée par défaut ici) dit au formateur de garder les éléments inline sur la même ligne que le texte qui les entoure, le comportement sûr pour la plupart du HTML du monde réel.

Contenu protégé, pre, textarea, script, style

Quatre éléments HTML ont du contenu à espaces significatifs qui ne doit pas être reformaté : <pre> affiche le texte exactement comme écrit y compris les sauts de ligne et les espaces ; <textarea> conserve les espaces du contenu initial ; <script> contient du JavaScript dont la sémantique dépend des espaces (ou au moins où ajouter de l'indentation corromprait le source) ; <style> contient du CSS qui devrait être reformaté par un formateur CSS-aware, pas un HTML. Les formateurs HTML de production (Prettier, Tidy, js-beautify) détectent ces éléments et sautent le reformatage de leur contenu. Divulgation honnête pour cet outil : l'implémentation est faite main plutôt qu'enveloppant une bibliothèque de production, et la gestion inline-vs-bloc + contenu-protégé est conservatrice mais pas parfaitement tolérante aux fautes. Si vous passez du HTML de production lourd à travers et que la sortie a l'air mauvaise à l'intérieur d'un bloc <pre> ou casse un script, l'option plus sûre est d'utiliser Prettier localement (c'est une install en une commande : npm install -g prettier, puis prettier --parser html input.html). Pour du HTML ordinaire de template et niveau composant, cet outil gère les cas courants.

Conventions d'attributs et de balises auto-fermantes

Les attributs HTML ont leurs propres choix de formatage. Les listes d'attributs courtes tiennent sur une ligne (<a href="/fr/about" class="link">) ; les listes longues s'enveloppent un par ligne, souvent avec le > fermant sur sa propre ligne. Le défaut printWidth: 80 de Prettier déclenche l'enveloppement quand une ligne dépasserait 80 caractères, ce qui est la convention moderne. Certaines équipes imposent un ordre d'attributs (class d'abord, puis id, puis data-*, puis ARIA, puis gestionnaires d'événements) ; la plupart des formateurs respectent l'ordre existant des attributs plutôt que de réordonner, puisque réordonner peut changer le comportement dans des cas subtils (spécificité CSS, lookups JavaScript de classes). Balises auto-fermantes : HTML5 ne requiert pas la barre oblique finale sur les éléments void (<br>, <hr>, <img>, <input>, <meta>, <link>, il y a 14 éléments void au total en HTML5), mais XHTML et JSX oui (<br />). Les formateurs soit préservent la barre si présente, la suppriment (HTML5-clean), soit l'ajoutent (XHTML-friendly) selon la configuration. Cet outil suit l'entrée, si votre source utilise <br />, la sortie la garde ; si vous utilisez <br>, la sortie garde ça.

Cas d'utilisation courants

• Revue de code · nettoyez le HTML avant de le partager ou de le relire avec des collègues.
• Débogage · un code bien formaté facilite la détection des balises manquantes ou d'une imbrication incorrecte.
• Nettoyage de gabarits · reformattez le HTML généré par des gabarits ou des outils de build.
• Transmission entre développeurs · rendez le code plus lisible pour les autres développeurs travaillant sur le même projet.
• Apprentissage · comprenez mieux la structure HTML en observant les motifs d'indentation.
• Inspection de modèles d'e-mail. Les constructeurs de modèles d'e-mail (Mailchimp, ConvertKit) produisent souvent du HTML aux styles inline difficile à lire ; le formater rend la structure visible avant soumission de modifications.

Le pipeline moderne, Prettier à l'enregistrement

Pour les projets avec un pipeline de build, le défaut 2026 est Prettier qui tourne à l'enregistrement dans votre éditeur et sur chaque commit via un hook de pré-commit. VS Code livre Prettier comme formateur HTML par défaut quand l'extension est installée ; déclenchez avec Format Document (Shift+Alt+F sur Windows/Linux, Shift+Option+F sur macOS) ou activez "editor.formatOnSave": true dans les paramètres. Les IDE JetBrains (WebStorm, IntelliJ) intègrent Prettier via Settings → Languages & Frameworks → JavaScript → Prettier. Les hooks de pré-commit via Husky + lint-staged exécutent Prettier sur chaque fichier en zone de staging avant d'autoriser le commit, garantissant qu'aucun HTML non formaté n'atteint le dépôt. Les checks CI exécutent prettier --check sur les pull requests pour attraper toute dérive de formatage. Rien de tout cela ne compte pour des snippets ponctuels collés d'ailleurs, c'est exactement à ça que sert cet outil in-browser. Pour le travail de projet à long terme, configurez Prettier ; l'outil in-browser est l'option sans friction pour tout le reste.

Confidentialité : pourquoi le tout-navigateur compte ici

Le HTML contient souvent des choses que vous ne voulez pas qu'un tiers voie : modèles d'outils admin internes, balisage de pages produit non publiées, variantes de tests A/B avec hypothèses d'expériences révélées dans les noms de classes, modèles d'e-mail avec contenu personnalisé, tableaux de bord clients avec PII dans les placeholders. Les formateurs côté serveur téléversent votre HTML vers un service tiers où il s'assoit dans des logs. Cet outil tourne entièrement dans votre navigateur via JavaScript, vérifiez dans l'onglet Network de DevTools en cliquant Format, ou mettez la page hors ligne (mode avion) après chargement et le formateur fonctionne encore. Sûr pour modèles produit non publiés, pages admin internes, variantes A/B-test ou tout HTML que vous ne voudriez pas voir copié sur le disque dur d'un inconnu.

Questions fréquentes

Qu'est-ce que l'embellissement HTML ?

L'embellissement HTML reformate votre code pour le rendre plus lisible en ajoutant une indentation et des retours à la ligne. Cela facilite grandement le débogage et l'édition, sans modifier le rendu du HTML dans les navigateurs.

Le formatage modifie-t-il l'apparence de mon HTML dans un navigateur ?

Non. Le formatage n'ajoute que des espaces et de l'indentation. Les navigateurs ignorent les espaces supplémentaires en HTML. Votre HTML formaté s'affichera à l'identique de l'original.

Que sont les balises en ligne ?

Les balises en ligne (comme <span>, <a>, <strong>) s'insèrent dans le texte sans créer de retour à la ligne. L'option « préserver les balises en ligne » les empêche d'être placées sur des lignes séparées et les maintient avec leur contenu.

2 espaces, 4 espaces, ou tabulations ?

2 espaces est le défaut web moderne, utilisé par GitHub, Google HTML/CSS Style Guide, Prettier, les exemples de style WHATWG et la plupart des paquets npm. 4 espaces persiste dans les anciennes traditions Java / Microsoft / PHP. Les tabulations sont privilégiées par le noyau Linux et certains projets Go. L'argument est plus vieux que la plupart des lecteurs et impossible à gagner ; la réponse pratique est de matcher ce que votre projet utilise déjà (ou la convention dominante de l'équipe) et laisser un formateur l'imposer. Pour un snippet ponctuel sans contexte projet, 2 espaces est le défaut le plus sûr en 2026.

Dois-je utiliser ceci si j'utilise déjà Prettier ?

Probablement pas, l'intégration Prettier de votre éditeur fait ceci à l'enregistrement, avec une pleine conscience de l'AST HTML et la gestion de contenu protégé que les formateurs de production exigent. Cet outil est pour les cas que votre pipeline de build ne couvre pas : HTML collé depuis un inspecteur de navigateur, snippets d'e-mail ou chat, sortie de moteur de template que vous voulez inspecter, formatage ponctuel hors de tout contexte projet. Pour le travail de projet à long terme, configurez Prettier localement ; pour du travail ponctuel sans friction, cet outil a la bonne forme.

Mes fichiers HTML sont-ils téléversés ?

Non. Le formatage tourne entièrement dans votre navigateur via JavaScript. Le HTML que vous collez ne traverse jamais le réseau, vérifiez dans l'onglet Network de DevTools en cliquant Format, ou mettez la page hors ligne (mode avion) après chargement et l'outil fonctionne encore. Sûr pour modèles produit non publiés, pages admin internes, variantes A/B-test, modèles d'e-mail avec contenu personnalisé, ou tout HTML que vous ne voudriez pas voir copié sur le disque dur d'un inconnu.

Outils associés