Comment utiliser le formateur HTML
- Collez votre HTML dans la zone de saisie : une page complète, un modèle ou un fragment copié depuis les outils de développement de votre navigateur.
- Cliquez sur Embellir pour indenter le balisage afin que chaque élément imbriqué se trouve sur sa propre ligne.
- Cliquez sur Minifier pour supprimer les commentaires et les espaces inutiles et obtenir un fichier plus léger.
- Recopiez le résultat dans votre éditeur ou votre CMS.
Le formateur fonctionne entièrement dans votre navigateur. Votre balisage n’est ni envoyé ni stocké, et il est traité comme du texte : rien de ce que vous collez n’est exécuté.
Pourquoi formater du HTML ?
Le HTML produit par les constructeurs de pages, les éditeurs d’e-mails, les exports de CMS et les outils de build est souvent minifié ou mal indenté. Cela convient aux navigateurs, mais la structure devient difficile à suivre pour les humains. Un HTML embelli montre clairement l’arbre du document, ce qui permet de voir où se ferme chaque <div>, de repérer un élément mal placé et de relire les modifications dans un diff.
La minification fait l’inverse. Supprimer les commentaires, l’indentation et les sauts de ligne allège le fichier, ce qui réduit légèrement la taille transférée. Sur la plupart des sites, la compression côté serveur (gzip ou Brotli) réduit déjà considérablement le HTML, la minification apporte donc un gain supplémentaire plus faible, mais elle reste courante dans les builds de production.
Problèmes HTML courants et comment les corriger
Les navigateurs sont indulgents : l’algorithme d’analyse du HTML se remet de la plupart des erreurs au lieu d’échouer. C’est pratique, mais cela signifie qu’un balisage cassé s’affiche souvent « presque bien » et provoque des bugs de mise en page déroutants. Embellir le code rend ces problèmes plus faciles à voir.
Éléments non fermés. Quand l’indentation dérive sans cesse vers la droite et ne revient jamais, un élément n’a probablement pas été fermé :
<div class="card">
<div class="card-body">
<p>Hello
</div>Le seul </div> ferme card-body (et termine implicitement le paragraphe), de sorte que le card extérieur reste ouvert et engloutit tout ce qui suit. Fermez chaque élément explicitement :
<div class="card">
<div class="card-body">
<p>Hello</p>
</div>
</div>Éléments de bloc dans des éléments en ligne ou dans <p>. Un <div> dans un <p> n’est pas autorisé : le navigateur ferme le paragraphe prématurément, et votre CSS cesse de s’appliquer comme prévu.
Balises mal imbriquées. <b><i>text</b></i> doit être <b><i>text</i></b>. Les éléments internes doivent se fermer avant les éléments externes.
Identifiants en double. Un id doit être unique dans le document. Les doublons cassent getElementById, les associations de labels et les ancres internes à la page.
Éléments vides et espaces
Certains éléments ne peuvent jamais avoir de contenu et n’ont pas de balise fermante. Ces éléments vides sont les suivants :
| Éléments vides |
|---|
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr |
En HTML, <br> et <br /> sont équivalents ; la barre oblique finale est facultative. Écrire </br> ou <img></img> est une erreur.
Les espaces entre éléments en ligne peuvent être visibles. Deux boutons inline-block séparés par un saut de ligne affichent un petit espace, alors que les mêmes boutons sur une seule ligne n’en ont pas. Un bon formateur préserve exactement le contenu de <pre> et de <textarea>, mais si la mise en page change légèrement après avoir embelli ou minifié, les espaces entre éléments en ligne en sont généralement la cause.
Conseils et bonnes pratiques
- Indentez avec deux espaces ; un HTML très imbriqué devient très large avec quatre.
- Déplacez les gros blocs
<style>et<script>intégrés vers des fichiers séparés, et nettoyez-les avec le formateur et minificateur CSS et le formateur et minificateur JavaScript. - Minifiez dans le cadre de votre build, pas à la main, afin que la source lisible reste dans le contrôle de version.
- Après le déploiement, vérifiez le SEO de la page avec le vérificateur SEO et son temps de chargement avec le test de vitesse de site web.
Questions fréquentes
Embellir change-t-il l’apparence de ma page ?
Généralement non. Ajouter de l’indentation entre des éléments de bloc n’a aucun effet visible. Les espaces entre éléments en ligne peuvent créer ou supprimer de petits écarts, vérifiez donc après le formatage les pages à la mise en page en ligne serrée.
Est-ce un validateur HTML ?
Non. Il réindente et minifie le balisage mais ne le vérifie pas par rapport à la spécification HTML. Le formatage permet toutefois de repérer facilement à l’œil de nombreuses erreurs de structure.
Le HTML minifié est-il meilleur pour le SEO ?
Les moteurs de recherche lisent aussi bien le HTML minifié que formaté. La minification peut rendre les pages légèrement plus petites, ce qui aide un peu les performances, mais le contenu, la structure et la vitesse comptent bien plus que les espaces.
Puis-je formater des modèles d’e-mail HTML ?
Oui. Le HTML des e-mails repose souvent sur des tableaux imbriqués et des styles en ligne, et l’embellir le rend beaucoup plus facile à modifier. Testez ensuite le résultat dans votre plateforme d’e-mailing, car certains clients de messagerie sont sensibles aux espaces.
Mis à jour