Formateur HTML
Embellissez du HTML désordonné, ou minifiez-le pour la production.
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- Indentation 2 ou 4 espaces
- Minification en un clic
- Rien n'est envoyé
Comment formater du HTML
- Collez votre HTML.
- Choisissez une taille d'indentation, ou activez la minification.
- Copiez ou téléchargez le résultat.
Embellir contre minifier
| Embellir | Minifier | |
|---|---|---|
| Indentation | Ajoute 2, 4 ou 8 espaces | La retire |
| Commentaires | Conservés | Retirés |
| Espaces entre les balises | Normalisés | Retirés |
| Contenu dans pre, textarea, script, style | Inchangé | Inchangé |
Quand le HTML minifié compte
- Une page en production se charge un peu plus vite et utilise moins de bande passante une fois les espaces et commentaires retirés.
- Un balisage minifié est plus difficile à lire dans view-source, un compromis acceptable en production mais gênant en débogage.
Conseils pour formater du HTML
- Gardez une copie lisible et indentée dans le contrôle de version et minifiez seulement ce que vous déployez, car déboguer un balisage minifié à l'œil est lent.
- Une indentation à 2 espaces convient à un balisage profondément imbriqué, et 4 espaces se parcourt plus facilement sur des pages simples et peu imbriquées.
Ce que l'indentation affecte ou n'affecte pas
- Elle ne change jamais ce qu'un navigateur affiche, car les espaces entre balises de bloc s'effondrent de toute façon.
- Elle peut visiblement changer l'espacement entre des éléments en ligne comme <span>, si un design compte sur un espace exact à cet endroit. Vérifiez ces zones après le formatage.
- Elle n'a aucun effet sur le comportement JavaScript, car la structure du DOM de la page reste la même dans les deux cas.
FAQ Formateur HTML
Que fait la minification ici ?
Elle retire les commentaires et les espaces entre les balises, sans toucher au texte ni aux attributs à l'intérieur des balises pre, textarea, script et style.
Le formatage change-t-il l'apparence de ma page ?
Non. L'indentation et les espaces entre les balises n'affectent pas le rendu, donc la page a le même aspect avant et après.
Corrige-t-il les balises cassées ou non fermées ?
Non. Il reformate le HTML que vous lui donnez. Corrigez d'abord les balises manquantes ou mal assorties dans votre éditeur.
Puis-je formater un document HTML complet ?
Oui, y compris le doctype, le head et le body. Les documents très longs peuvent prendre un instant à formater.
Valide-t-il mon HTML ?
Non. Il reformate ou minifie le balisage que vous lui donnez, et ne vérifie pas les textes alternatifs manquants, les balises non fermées ou d'autres problèmes de validation.
Les balises style et script en ligne sont-elles aussi reformatées ?
Oui, lors de l'embellissement. Le formateur indente le CSS à l'intérieur d'une balise style et le JavaScript à l'intérieur d'une balise script en même temps que le balisage autour.
La minification retire-t-elle les commentaires utilisés par un système de templates ?
Les commentaires HTML standard (<!-- ... -->) sont toujours retirés, y compris ceux qu'un système de templates pourrait utiliser comme marqueurs. Si vos commentaires ont un sens ailleurs, formatez seulement et sautez la minification.
Puis-je formater juste un fragment, sans document complet ?
Oui. Un extrait de quelques balises se formate de la même façon qu'une page entière. Il n'a pas besoin d'un doctype, d'un head ou d'un body pour fonctionner.