Formateur HTML

Collez un document ou un extrait HTML et cet outil le met en forme avec une indentation propre, ou le réduit à une seule ligne compacte.

Que devient un balisage mal formé ?

Rien ne casse. Le formateur s’appuie sur js-beautify, qui travaille sur des tokens plutôt que d’analyser un arbre DOM strict : les balises non fermées, les fermetures mal appariées ou un document sans <head> sont quand même indentés, sans erreur. Vous pouvez choisir une indentation à 2 espaces, 4 espaces ou tabulation. La minification suit la même logique : une série de passes textuelles qui suppriment les commentaires et compressent les espaces entre les balises, sans essayer de corriger un balisage mal imbriqué ou non fermé. Dans les deux sens, vous pouvez donc nettoyer un HTML brouillon sans devoir traquer chaque balise cassée au préalable.

Un point que la minification prend soin de préserver : le contenu des éléments <pre>, <textarea>, <script> et <style>. Les espaces à l’intérieur de ces balises sont soit significatifs (les sauts de ligne d’un bloc <pre>), soit du code réel que la compression pourrait casser (du JavaScript ou du CSS en ligne). L’outil laisse donc ces blocs intacts et ne touche qu’aux espaces entre les balises ordinaires.

Est-ce que quelque chose est envoyé quelque part ?

Non. La mise en forme et la minification tournent entièrement dans votre navigateur, via la bibliothèque js-beautify chargée dans la page ; rien n’est envoyé à un serveur. Des modèles de page, du balisage d’e-mail ou des fragments récupérés contenant de vraies données clients peuvent donc passer par cet outil sans quitter votre machine.

À quoi ça sert ?

Les cas courants : rendre lisible une page minifiée récupérée depuis l’affichage du code source, réduire la taille d’un modèle d’e-mail HTML avant envoi, ou reformater le balisage d’un composant avec une largeur d’indentation cohérente avant une revue de code. Ça marche aussi dans l’autre sens : si vous avez du HTML écrit à la main avec des espacements incohérents et voulez une ligne compacte à coller dans une valeur de configuration ou un attribut data-*, la minification s’en charge en une étape.

Alterner entre les deux modes est aussi un bon moyen de comparer deux versions d’une page, puisque les outils de diff fonctionnent bien mieux sur un balisage formaté de façon cohérente que sur un mélange de styles d’indentation. Si vous maintenez un site statique ou une bibliothèque de composants, faire passer du HTML généré ou copié-collé par cet outil avant de le committer garde l’ensemble du code homogène, même quand les morceaux viennent de sources différentes.