Déminifier du HTML en ligne
Transformez un code source compressé en balisage lisible. Les balises sont indentées selon leur profondeur, les attributs présentés proprement, et les scripts et styles intégrés formatés en même temps que le document.
Pourquoi le code source ressemble à ça
Les minifieurs HTML écrasent les espaces entre les balises, retirent les commentaires, suppriment les balises fermantes optionnelles et enlèvent les guillemets autour des valeurs d'attribut qui peuvent s'en passer. Le templating côté serveur en rajoute, puisqu'une page assemblée à partir de dizaines de fragments arrive sous la forme d'un flux unique sans aucun rapport avec les fichiers qui l'ont produite. Ouvrez le source de presque n'importe quel site en production et vous trouverez un document fait de quelques lignes énormes, où retrouver la balise fermante d'une section revient à compter les chevrons à l'œil.
La structure, c'est tout l'intérêt
Le HTML est un arbre, et un arbre est illisible quand il est imprimé à plat. Indenter selon la profondeur d'imbrication montre immédiatement la forme du document : où finit l'en-tête, quel conteneur enveloppe le contenu principal, à quelle profondeur se trouve un composant, et quel élément a perdu sa balise fermante. C'est ce qui rend un source formaté utile pour vérifier l'ordre des titres, inspecter le balisage généré par un framework, ou comprendre comment un concurrent a structuré une section qui vous intéresse.
Les scripts et styles intégrés aussi
Une vraie page n'est presque jamais que du balisage. Extraits d'analytics, données structurées JSON-LD, objets de configuration et CSS critique sont intégrés directement dans le document, et un minifieur compresse tout cela également. Le formateur traite chaque bloc intégré avec le bon analyseur : une balise script contenant du JavaScript minifié ressort en JavaScript lisible, une balise style ressort en CSS lisible, le tout à l'intérieur d'un document correctement indenté.
Le formatage respecte les balises sensibles aux espaces
Indenter du HTML modifie les espaces entre les balises, et les espaces peuvent être significatifs. Le formateur en tient compte : le contenu des balises pre et textarea est laissé exactement tel quel, et les éléments en ligne ne sont pas coupés d'une façon qui ajouterait ou retirerait des espaces visibles autour du texte. Vous obtenez un document lisible sans changer la façon dont la page s'affiche.
Questions fréquentes
Puis-je coller un code source de page entier ?
Oui. Copiez le source depuis votre navigateur avec view-source, ou chargez directement l'URL, et le document complet, y compris le head, le body, les scripts intégrés et les données structurées, sera formaté.
Le formatage change-t-il le rendu de la page ?
En principe non. Les éléments sensibles aux espaces comme pre et textarea sont préservés, et le contenu en ligne est traité avec précaution. Cela dit, formatez toujours une copie pour la lire plutôt que de renvoyer le résultat en production sans test.
Est-ce que ça marche sur des templates Twig ou Blade ?
En partie. Le balisage standard se formate bien, mais les balises de template avec leur propre syntaxe peuvent perturber l'analyseur HTML. L'outil vise le HTML que le navigateur reçoit réellement, pas le template qui l'a généré.