HTML Formatter
Understand HTML Formatter
Ce formateur indente le HTML selon la profondeur d'imbrication, ou le réduit à une seule ligne débarrassée de ses commentaires.
How it works
Le balisage est découpé en balises, commentaires et blocs de texte, et le niveau d'indentation monte à chaque balise ouvrante et redescend à chaque balise fermante. Les éléments vides (br, img, input, meta, link) n'ouvrent jamais de niveau puisqu'ils n'ont rien à fermer, et les éléments en ligne (a, span, strong, code et les autres) sont délibérément maintenus à plat, pour qu'une phrase ne soit pas coupée à raison d'un mot par ligne. La minification fait l'inverse : les commentaires sont supprimés et les espaces entre balises sont réduits.
When to use it
- Lire le source d'une page après sa minification ou sa production par un outil de compilation.
- Démêler un composant imbriqué ou un gabarit d'e-mail pour trouver où un div n'est pas fermé.
- Nettoyer un balisage collé depuis un éditeur WYSIWYG ou un champ de CMS.
- Vérifier la structure d'un fragment avant de le coller dans un gabarit.
Watch out for
- Les espaces entre éléments en ligne font partie du rendu. Réduire </span> <span> à </span><span> retire une espace que le lecteur voit, si bien qu'une sortie minifiée n'est pas toujours visuellement identique.
- Il s'agit d'une passe textuelle, pas d'un analyseur HTML. Le contenu de script, style, pre et textarea est traité comme du balisage ordinaire, si bien qu'embellir une page réindentera les exemples de code et le texte préformaté, là où l'espacement porte du sens.
- La minification supprime tous les commentaires, y compris les commentaires conditionnels dont un gabarit d'e-mail dépend pour les anciennes versions d'Outlook, et tout marqueur que votre outillage lit.
- Des balises déséquilibrées produisent une indentation étrange plutôt qu'une erreur — une sortie qui se décale régulièrement vers la droite signale généralement une balise jamais fermée.
Not the right tool for: Minifier du HTML pour la production. Un minificateur de compilation analyse le document et sait quels espaces peuvent être retirés sans risque ; faites cela dans votre chaîne de production plutôt qu'en collant du texte.
Frequently Asked Questions
Puis-je formater un simple fragment plutôt qu'un document entier ?
Oui — collez n'importe quel fragment (un div, un gabarit partiel, ou même un seul élément). Le formateur n'exige pas une structure complète DOCTYPE/html/head/body.
Gère-t-il les gabarits Jinja, Handlebars ou Mustache ?
La syntaxe de gabarit ({{ }}, {% %}, {{{ }}}) est conservée telle quelle, puisque le formateur la traite comme du contenu textuel. La structure HTML autour des balises de gabarit est formatée normalement.
Quelle est la différence entre la minification HTML et gzip ?
La minification retire du HTML source les commentaires, les espaces et les balises de fermeture facultatives, avec un gain typique de 5 à 15 %. Gzip compresse ensuite davantage la sortie minifiée (généralement 60 à 80 % supplémentaires). Les deux devraient être utilisés en production — minifier d'abord, puis compresser en gzip côté serveur.
How to Use HTML Formatter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.