Outil de Formatage HTML

Le formatage HTML réorganise un balisage désordonné ou compressé en code lisible avec indentation cohérente, retours à la ligne et hiérarchie de balises visible. Il facilite revue, débogage, apprentissage, transmission entre équipes et maintenance, surtout pour repérer balises non fermées, imbrication incorrecte, longues listes d’attributs ou HTML généré difficile à parcourir. En production, l’opération inverse peut être utile: la minification retire espaces, commentaires et sauts inutiles pour réduire le poids transféré. L’outil aide à passer entre lisibilité et compacité, mais ne corrige pas automatiquement la sémantique, l’accessibilité, les liens cassés, le contenu intégré risqué ni les erreurs de template.

Un formateur HTML suit l'algorithme de construction d'arbre du WHATWG HTML Standard. Les octets sont décodés (généralement en UTF-8 selon le meta charset ou le BOM), le tokenizer parcourt les états data, RCDATA, RAWTEXT, script-data et plusieurs états d'attributs définis dans la section 13.2.5, et la phase de construction d'arbre construit un DOM en utilisant la machine à états par mode d'insertion (initial, before html, in head, in body, in table, in select, etc.). Le parseur est tolérant par conception : un <p> non fermé est automatiquement fermé quand un bloc suit, un </tr> isolé est ignoré, et un <table> mal placé est déplacé par foster parenting. Les parseurs de qualité navigateur exposent cela via new DOMParser().parseFromString(src, 'text/html') ; les outils côté Node utilisent parse5 (l'implémentation de référence WHATWG), htmlparser2 ou cheerio. La réimpression parcourt l'arbre résultant et sérialise selon la catégorie de l'élément. Les éléments vides — area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr — ne reçoivent jamais de balise fermante en HTML5 (l'auto-fermeture XHTML /> est autorisée mais optionnelle). Les conteneurs de niveau bloc (div, section, article, header, footer, nav, main, ul, ol, li, table) obtiennent leur propre ligne à profondeur*indent espaces ; le contenu de type phrasé/inline (span, a, strong, em, code) est conservé en ligne car CSS white-space: normal réduit les suites d'espaces en un seul caractère. Deux types d'éléments doivent être préservés tels quels : <pre> et <textarea> portent la sémantique white-space: pre, et leur saut de ligne initial est absorbé par le parseur ; les corps de <script> et <style> sont de type RAWTEXT, donc ré-indenter leur contenu changerait le comportement à l'exécution — ils sont généralement délégués à un sous-formateur JS ou CSS puis ré-intégrés. La sérialisation des attributs normalise les guillemets (simples vs doubles) et ré-encode les délimiteurs intégrés via les références de caractères nommées &amp;, &lt;, &gt;, &quot; et la référence numérique &#39;. L'ordre des attributs n'est pas significatif dans le DOM, donc les formateurs appliquent généralement un ordre stable (id, class, puis alphabétique). Le retour à la ligne se déclenche au-delà d'un printWidth configuré : les attributs sont séparés un par ligne avec le > fermant soit sur sa propre ligne (prettier-plugin-html bracketSameLine: false), soit accolé. La minification inverse le processus — les espaces entre les balises de bloc sont supprimés, les commentaires sont retirés sauf les conditionnels IE <!--[if, et les guillemets sont supprimés des attributs dont la valeur correspond à [A-Za-z0-9._-]+. Les deux opérations sont en O(n) sur la longueur de l'entrée.

• Parseur : construction d'arbre WHATWG HTML (section 13) via DOMParser('text/html') dans le navigateur, parse5/htmlparser2/cheerio sur Node ; la machine à états par mode d'insertion gère les balises manquantes/mal placées et le foster parenting.
• Éléments vides (pas de balise fermante) : area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr — 14 éléments selon le HTML Living Standard. L'auto-fermeture XHTML /> est tolérée mais redondante.
• Éléments préservant les espaces : <pre> et <textarea> portent CSS white-space: pre et absorbent un saut de ligne initial ; leurs octets intérieurs ne sont jamais ré-indentés ou la sortie visible change.
• Contextes RAWTEXT : les corps de <script> et <style> ne sont pas du HTML — ils sont délégués à des sous-formateurs JS/CSS (ou laissés tels quels). Ré-indenter du texte brut dans une expression régulière ou un littéral de chaîne casserait la sémantique d'exécution.
• Normalisation des attributs : style de guillemets choisi (simple/double), délimiteurs intégrés ré-encodés avec les cinq références nommées (&amp;, &lt;, &gt;, &quot;, &#39;), ordre stable appliqué (id, class, puis alphabétique) puisque l'ordre DOM n'est pas significatif.
• Retour à la ligne au-delà de printWidth (généralement 80/100/120) : attributs séparés un par ligne avec le > fermant soit sur sa propre ligne, soit accolé au dernier attribut, reproduisant l'option bracketSameLine de prettier-plugin-html.
• Minification : réduit les espaces inter-balises, supprime les commentaires (en conservant les conditionnels <!--[if IE]>), retire les balises fermantes optionnelles (</li>, </p> quand suivis d'un frère), et supprime les guillemets des attributs correspondant à [A-Za-z0-9._-]+ ; le round-trip est en O(n).