Formateur HTML

Du HTML minifié arrivé sous la forme d’une seule ligne de 40 000 caractères est illisible, et du HTML indenté à la main puis retouché six fois ne vaut guère mieux. L’outil ci-dessus travaille dans les deux sens : réindenter le balisage pour pouvoir le lire, ou le réduire au strict nécessaire pour pouvoir le livrer.

Comment ça marche

Collez votre balisage, choisissez formater ou minifier, puis une indentation de 2 ou 4 espaces. Tout s’exécute dans le navigateur — rien n’est envoyé sur un serveur, ce qui compte dès que la page que vous déboguez contient des jetons de session ou des données clients.

Formater découpe l’entrée en tokens et la réécrit à raison d’un nœud par ligne, en augmentant l’indentation après une balise ouvrante et en la diminuant avant une balise fermante. Trois détails rendent le résultat correct, et pas seulement bien rangé :

• Les éléments vides — <br>, <img>, <input>, <meta>, <link> et les autres éléments vides (void elements) définis par HTML5 — n’ouvrent jamais de niveau, si bien que le contenu qui les suit n’est pas indenté à tort sous eux.
• Les éléments à texte brut — <script>, <style> et <textarea> — voient leur contenu parcouru jusqu’à la balise fermante littérale, exactement comme le prévoit le modèle de contenu de HTML5. Un < dans une chaîne JavaScript ou un sélecteur CSS n’est donc pas pris pour le début d’une balise.
• Les commentaires et le doctype sont transmis tels quels.

Minifier réduit les suites d’espaces et regroupe le tout sur une seule ligne. Un blanc qui contient un retour à la ligne est considéré comme de la mise en forme et supprimé ; une simple espace en ligne — celle qui sépare deux éléments <span> adjacents sur la même ligne — est conservée sous forme d’une espace unique, car la supprimer collerait visuellement les deux mots.

Ce qu’il ne fait volontairement pas

C’est un formateur, pas un validateur ni un outil d’assainissement. Il réindentera sans broncher un balisage contenant une <div> non fermée, et le résultat trahira l’imbrication fautive par une indentation qui ne revient jamais à la marge gauche — c’est souvent le moyen le plus rapide de trouver la balise non fermée, mais ce n’est pas un message d’erreur. Pour vérifier la conformité, passez le balisage au validateur du W3C.

Il ne minifie pas non plus le contenu de <script> et de <style>. Celui-ci est conservé à l’identique, car compresser du JavaScript sans risque suppose de l’analyser comme du JavaScript, et une expression régulière qui s’y essaie finira tôt ou tard par casser sur un template literal. Confiez ce travail à un vrai bundler.

L’ordre des attributs, le style de guillemets et la casse restent exactement tels que vous les avez écrits. L’outil ne modifie que les blancs, rien d’autre : un fichier formaté et sa version minifiée représentent donc toujours le même document.

Quand utiliser chaque mode

Formater sert à lire : inspecter le code source d’une page, relire le diff d’un template, ou comprendre pourquoi un fragment rendu côté serveur s’imbrique autrement que ne le laisse supposer le template. L’indentation rend visibles des erreurs de structure qu’un pavé de texte masque.

Minifier sert au transport, et son intérêt est moindre qu’autrefois. Quand le HTML est servi en HTTP avec gzip ou Brotli, en retirer les blancs ne fait en général gagner que quelques pour cent, car la compression gère déjà très bien les blancs répétés. Cela reste utile pour du contenu qui doit tenir dans un budget fixe — un modèle d’e-mail, un bloc de CSS critique inline, un attribut data contenant un fragment.

Ne minifiez pas ce qu’une étape de build minifiera pour vous, et ne committez jamais du HTML minifié comme source : c’est la version lisible que des humains doivent maintenir.

Pour aller plus loin

Si vous formatez du balisage pour le comprendre, les règles de structure méritent d’être connues directement : les bases de HTML5 présente les catégories d’éléments, ce que chaque élément peut contenir et la raison d’être des distinctions entre éléments vides et à texte brut évoquées plus haut. Lorsque le balisage est produit par une couche de vue plutôt qu’écrit à la main, Spring MVC montre où se situe le template dans le traitement d’une requête.

Pour la même opération sur des données plutôt que sur du balisage, utilisez le formateur JSON ou le formateur YAML.