Formater du HTML
Le Formateur HTML réindente et minifie le balisage dans votre navigateur. HTML n’est pas XML, et le formater comme si c’en était corrompt les documents de quatre façons précises — éléments vides, éléments à contenu textuel brut, balises fermantes facultatives et espaces significatifs entre éléments en ligne — et cet outil gère chacun de ces cas explicitement.
Comment fonctionne Formater du HTML ?
La plupart des formateurs HTML sont des formateurs XML sous un autre nom, et chacune des quatre différences entre les deux a déjà produit un vrai bug.
Les éléments vides n’ouvrent pas de portée
<br>, <img>, <input>, <hr> et dix autres n’ont pas de balise fermante — pas facultativement : pas du tout. Un formateur qui augmente l’indentation à chaque balise ouvrante décale d’un cran vers la droite tout ce qui suit le premier <img> et ne s’en remet jamais ; une page avec vingt images finit donc indentée hors de l’écran.
Script et style contiennent du texte, pas du balisage
Un < à l’intérieur d’un <script> est un signe inférieur. Le parser comme une balise, c’est ainsi que if (a < b) finit en document corrompu, et c’est pourquoi l’exemple ci-dessus contient exactement cette expression. Le contenu de <script>, <style>, <textarea> et <title> est consommé en bloc, jusqu’à la balise fermante correspondante.
Les espaces entre éléments en ligne sont rendus
<b>a</b> <i>b</i> s’affiche « a b » ; sans l’espace, cela s’affiche « ab ». Un formateur qui place chaque élément sur sa propre ligne a inséré une espace dans chaque flux de texte du document — le symptôme classique, c’est un écart parasite avant chaque point final et après chaque lien. Les éléments en ligne sont donc conservés dans une séquence mise en mémoire tampon, et seuls les éléments bloc commencent des lignes. C’est la même règle qui fait que le contenu de <pre> n’est jamais réindenté : là, l’espace constitue la mise en page.
Les balises fermantes sont facultatives pour plusieurs éléments
</li>, </p>, </td> et compagnie peuvent être omises, et une grande partie du HTML écrit à la main les omet. Un formateur doté d’une pile de balises stricte rejette le document ou déséquilibre son indentation. Ici, la pile se déroule à travers les éléments à fermeture facultative quand elle rencontre une balise fermante qui ne correspond pas au sommet.
Ce que signale l’analyse
Un <img> sans attribut alt est signalé, car un lecteur d’écran annonce alors le nom du fichier en solution de repli — ce qui est pire que le silence, et c’est pourquoi une image décorative a besoin de alt="" plutôt que d’aucun attribut du tout. Les éléments non fermés sont nommés : le navigateur saura se rattraper, mais l’endroit où il décide de les fermer relève de son choix et non du vôtre, et les deux diffèrent souvent.
Entrée
<div><br><p>text</p></div>
Formaté
<div>
<br>
<p>
text
</p>
</div>Quelles options et quels cas limites Formater du HTML prend en charge ?
| Paramètre | Type | Valeur par défaut | Comportement et cas limites |
|---|---|---|---|
| Indentation | espaces | 2 | Par niveau d’imbrication. Les éléments void n’ajoutent pas de niveau. |
| Retour des attributs | comptage | 4 | Les balises avec au moins ce nombre d’attributs, ou plus longues que 100 caractères, placent chaque attribut sur sa propre ligne. |
| Conserver le texte brut | booléen | on | Le contenu des éléments pre et textarea n’est jamais modifié, car leur espace blanc est rendu. Les corps des éléments script et style sont ré-indentés, ce qui est sans risque. |
| Éléments vides | 14 éléments | — | area base br col embed hr img input link meta param source track wbr. Aucun de ces éléments n’ouvre un scope. |
| Éléments en texte brut | script, style, textarea, title, pre | — | Le contenu est du texte plutôt que du balisage. Un < dans un script est un signe inférieur, et l’analyser comme une balise corrompt le document. |
| Éléments en ligne | conservés dans le flux | — | a, b, span, em, img et les autres restent sur la ligne où ils étaient, car un saut de ligne entre eux est rendu comme un espace. |
| Fermeture optionnelle | tolérée | — | li, p, td, tr, option et d’autres peuvent omettre leur balise de fermeture. La pile se déroule plutôt que de rejeter le document. |
| Guillemets des attributs | normalisés | double | Sauf si la valeur contient une double citation, auquel cas des guillemets simples sont utilisés. Les attributs booléens conservent leur forme brute. |
| Minifier | espaces | — | Réduit les séries d’espaces mais conserve un seul espace là où les éléments en ligne se rencontrent, et préserve le contenu des éléments pre. Les commentaires conditionnels survivent car ils sont du balisage pour les anciens IE. |
Questions fréquentes
Pourquoi mon élément en ligne n’est-il pas sur sa propre ligne ?
Parce que le placer là changerait ce que la page affiche. <b>a</b> <i>b</i> montre « a b » ; sans l’espace entre les balises, cela montre « ab ». Un formateur qui casse chaque élément sur sa propre ligne insère une espace dans chaque flux de texte du document, et le symptôme est un écart parasite avant chaque point final. Les éléments en ligne restent dans la séquence où ils étaient.
Pourquoi le contenu de mon <pre> est-il resté intact ?
Parce que dans un <pre>, l’espace est le contenu. Le réindenter change ce que voit le lecteur, ce qui est l’opposé du formatage. C’est pareil pour <textarea>, où l’espace constitue la valeur du champ. Les corps de script et de style sont réindentés, car leurs espaces ne sont pas rendus.
Mon HTML ne contient aucune balise </li> fermante. Est-ce cassé ?
Non — HTML permet d’omettre la balise fermante pour li, p, td, tr, option, thead et plusieurs autres, et une grande partie du balisage écrit à la main le fait. Le formateur déroule sa pile quand il rencontre une balise fermante qui ne correspond pas au sommet, si bien que le document se formate correctement. S’il faut ou non les omettre est une question de style ; celle de savoir si le parser s’en sort n’en est pas une.
Pourquoi l’outil avertit-il d’un attribut alt manquant ?
Parce qu’un <img> sans alt fait annoncer par un lecteur d’écran le nom du fichier — « i-m-g tiret bas 4 0 2 1 point p-n-g » — ce qui est pire que ne rien dire. La solution pour une image décorative, c’est alt="", qui indique explicitement à la technologie d’assistance de l’ignorer. Un attribut absent et un attribut vide n’ont pas la même signification, et un seul des deux convient à la décoration.
Faut-il minifier le HTML ?
Seulement dans le cadre d’un build, et le gain est plus faible qu’on ne l’imagine une fois gzip ou brotli en jeu — la compression gère déjà très bien les espaces répétés. Là où la minification sert vraiment, ce sont les gabarits d’e-mails, où certains clients refusent les messages volumineux, et le CSS critique en ligne, où les octets se trouvent sur le chemin critique.
Mon balisage est-il envoyé ?
Non. La tokenisation et le formatage s’exécutent dans votre navigateur, ce que vous pouvez vérifier dans le panneau Réseau. Le balisage d’une vraie application transporte souvent des attributs data, des URL internes et du JSON en ligne contenant du vrai contenu.