Le formatage est la partie du flux de travail avec du code que personne ne remarque tant qu'elle ne manque pas : un bloc d'HTML se lit comme un seul mot très long, et ce même bloc devient un arbre dès que l'indentation est correcte. Un formateur ne change pas ce que votre balisage signifie, il change ce que cela coûte de le regarder, et c'est précisément là que se consomme l'essentiel du temps de débogage. Le Formateur HTML fonctionne entièrement dans votre navigateur : vous collez le balisage, vous choisissez un mode, et le résultat apparaît dans le panneau à côté. Rien n'est téléversé et rien ne quitte l'onglet, ce qui compte quand la page que vous nettoyez contient des clés API, des noms d'hôtes internes ou des données clients que vous n'enverriez jamais à un service tiers.
L'outil travaille dans deux directions et répond à deux questions différentes. Le mode formatage demande : à quoi ressemble cette structure quand les espaces sont honnêtes ? Le mode minification demande : quelle est la plus petite taille que ce fichier peut atteindre sans le moindre changement de comportement ? Le reste de ce guide explique comment passe chaque traitement, ce qu'il arrive à une page réelle de 458 caractères dans chaque mode, quelles parties du document le minimiseur refuse de toucher et lesquelles il supprime, comment l'indentation et la liste d'éléments en ligne donnent forme au résultat, et où cet outil se place par rapport aux autres outils de format de la collection.
Comment fonctionne un formateur HTML : deux modes, un collage
Les deux modes lisent la même chaîne d'entrée et écrivent un résultat en texte brut dans le panneau de sortie ; la différence, c'est la transformation appliquée. Le mode formatage confie le balisage au moteur HTML de js-beautify avec un jeu fixe d'options : une indentation de deux ou quatre espaces, aucune retouche de ligne, aucun saut de fin de document, aucune indentation à l'intérieur des éléments en ligne, et une liste d'éléments dont le contenu n'est jamais coupé entre plusieurs lignes. Le mode minification exécute un pipeline sur mesure : d'abord il extrait tous les blocs script, textarea et pre du document et les met de côté, ensuite il supprime les commentaires HTML, il condense chaque séquence d'espaces en un seul espace, il retire les espaces autour des jonctions de balises, et enfin il remplace les blocs protégés byte par byte.
Cet ordre est tout le design. Condenser les espaces est sûr pour le balisage et même pour le CSS à l'intérieur d'une balise style, car dans ces deux langages une séquence d'espaces et de sauts de ligne équivaut à un seul espace. Ce n'est pas sûr à l'intérieur d'une balise pre, où les espaces sont le contenu, ni à l'intérieur d'un script, où le minimiseur collerait allègrement les instructions. Extraire puis restaurer permet de passer en force sur le reste du document tout en faisant ressortir ces trois zones exactement comme elles sont entrées, sauts de ligne compris.
Le cas standard : une page de 458 caractères devient une ligne de 281
Prenez une page écrite à la main : un doctype, un head avec charset, un titre, un petit bloc style, et un body contenant une carte avec un en-tête, un paragraphe et un bouton. Écrite comme on écrit vraiment, avec l'indentation que l'on taperait et un commentaire de brouillon resté en place, elle fait 458 caractères sur 28 lignes. Passez-la au mode formatage et la page revient avec 390 caractères sur 27 lignes : le titre et l'en-tête trop indentés se replacent sur leur propre ligne, la structure se resserre sur un rythme constant de deux espaces, et le commentaire de brouillon reste à sa place. Si la norme de votre projet est de quatre espaces, le même passage rend un document au même nombre de lignes avec une indentation plus large.
Si vous passez cette même page de 458 caractères au mode minification, le résultat est de 281 caractères sur une seule ligne, une réduction de 38,6 %. Le commentaire de brouillon a disparu, l'indentation a disparu, les espaces entre balises ont disparu, et ce qui reste est le même document : mêmes éléments, mêmes attributs, même texte, même CSS. Si vous voulez les chiffres avant et après côte à côte sans faire l'arithmétique à la main, le Compteur et Analyseur de Caractères lit la longueur de n'importe quel panneau et transforme l'économie en un nombre que vous pouvez citer dans une demande de fusion.
Ce que la minification protège et ce qu'elle supprime
Trois types de blocs sont sortis du document avant toute condensation : script, textarea et pre. Une page qui contient un script avec deux affectations, chacune sur sa propre ligne, revient de la minification avec les deux sauts de ligne intacts, car le bloc entier, de la balise ouvrante à la balise fermante, voyage jusqu'à la sortie sans être touché. Un bloc pre qui dépend de doubles espaces et de sauts de ligne pour s'afficher comme un extrait de code les conserve tous. La protection est byte par byte, pas ligne par ligne, elle couvre donc aussi les espaces qui semblent accidentels mais portent un poids, comme ceux qui empêchent un élément en ligne de fusionner avec son voisin.
La protection est une frontière, pas une destination. Le script à l'intérieur d'un bloc protégé est à l'abri du passage HTML, et c'est toute la promesse que le passage HTML peut faire : la minification réelle de JavaScript est une question de syntaxe, où l'on peut supprimer les instructions mortes, les parenthèses redondantes et les renommages sûrs d'identifiants, et c'est le travail du Formateur et Minificateur JavaScript, avec un moteur qui analyse le code au lieu de faire des correspondances par motif. La balise style se trouve de l'autre côté de la frontière : son CSS n'est pas protégé, il subit le traitement des espaces, les règles restent, les intervalles rétrécissent, et le résultat reste du CSS valide. Quand la feuille de style mérite un passage plus profond, le Minificateur CSS prend le relais, avec un moteur qui sait où un espace entre un sélecteur et une déclaration porte un poids et où c'est du bruit pur.
Tout ce qui reste à l'extérieur de ces blocs subit le traitement complet, et deux détails méritent d'être connus. Les commentaires HTML sont supprimés purement et simplement, et le passage exécute la suppression de commentaires deux fois, une fois avant la condensation des espaces et une fois après, car la condensation peut rapprocher deux demi-commentaires en un seul qui n'existe qu'à l'état condensé. Et les espaces autour des jonctions de balises, les interstices entre une parenthèse fermante et la prochaine parenthèse ouvrante, disparaissent, si bien que la sortie est une ligne ininterrompue de crochets. Un comportement à prévoir : là où un bloc protégé se trouvait dans le flux, un seul espace peut rester à sa place, parce que la condensation s'est faite autour d'un marqueur, pas autour de la vraie balise. Rien ne casse ; le fichier reste valide, il est juste moins serré que le reste de la ligne.
Mode formatage : indentation, retouche et liste d'éléments en ligne
Le formateur n'expose qu'un seul réglage que la plupart des utilisateurs modifient, et c'est la largeur d'indentation : deux espaces par défaut, quatre en alternative. Sur l'exemple de 197 caractères et cinq lignes avec un commentaire et un petit script, le passage à deux espaces rend 244 caractères sur 18 lignes, et le passage à quatre espaces rend les mêmes 18 lignes avec 278 caractères. Mêmes structure et nombre de lignes, plus de marge horizontale ; le choix est une convention d'équipe, pas une question d'exactitude. La retouche de ligne est désactivée exprès, pour qu'une longue liste d'attributs reste sur une seule ligne au lieu d'être coupée à une colonne arbitraire, et la sortie s'arrête là où s'arrête la dernière balise, sans saut de fin ajouté.
Le réglage le plus subtil est la liste des éléments traités comme en ligne : a, span, td, th, small, pre et code. Pour ces balises, le moteur refuse de couper la ligne entre le crochet ouvrant et le crochet fermant, si bien qu'un lien qui entoure un mot au milieu d'une phrase reste sur une ligne, et qu'une cellule de tableau ne disperse pas son contenu sur toute la page. C'est cette liste qui fait que la sortie formatée d'une page dense en texte se lit comme si vous l'aviez indentée à la main : les éléments de bloc s'empilent, les éléments en ligne coulent, et rien au milieu d'une phrase ne reçoit un saut de ligne en plus.
Formats voisins : JSON, XML et la place de chaque formateur
Le HTML est le plus indulgent des langages de balisage, ce qui est précisément la raison pour laquelle on abuse le plus de ses espaces. Une charge JSON, en revanche, casse dès qu'une virgule en trop ou un espace final s'infiltre, elle a donc son propre outil avec un validateur qui indique la ligne et le motif : le Formatteur JSON lit le même type de bloc collé et le rend soit formaté, soit rejeté, le compagnon idéal quand le HTML que vous nettoyez embarque un objet de configuration dans une balise script. Le XML est le cousin plus strict, où une parenthèse non appariée est une erreur dure et non un soupçon du navigateur, et le Formateur XML gère cette famille de documents avec le même schéma formatage-plus-minification.
Le sens de la division est que chaque format dispose d'un moteur qui parle vraiment sa langue : un réagencement de HTML pour le document, un moteur qui comprend le CSS pour les feuilles de style, et un analyseur de JS pour les scripts. Faire passer les quatre outils sur une même page, c'est la même répartition du travail qu'un système de construction opère avec sa chaîne d'outils, sans la construction : on formate le document, on minimise les charges, on publie le résultat. Le formateur HTML est la pièce qui garde la structure lisible au milieu, et c'est exactement la partie qu'un minimiseur générique abîme en premier, parce qu'il optimise la taille du fichier pendant que vous êtes encore en train d'éditer.
Lire le résultat avant de publier
Le panneau de sortie est toute la surface de relecture, il vaut donc la peine de le lire comme le ferait un relecteur. En mode formatage, regardez d'abord la structure : les blocs sont-ils imbriqués comme vous l'attendez, la liste des éléments en ligne garde-t-elle le texte lisible, et existe-t-il un élément que le rythme de deux espaces a rendu plus difficile à suivre ? Le commentaire que la minification supprime est le seul point où les deux modes divergent sur ce que votre fichier contient, et si ce commentaire portait un poids pour la personne suivante, c'est la version du mode formatage qu'il faut garder.
En mode minification, la relecture est plus courte et plus mécanique. Le fichier devrait tenir sur une ligne, les balises devraient être contiguës, et les zones protégées devraient survivre : ouvrez la sortie, repérez le script, confirmez que les sauts de ligne y sont toujours. Si vous avez besoin de la page en texte pur plutôt qu'en balisage, le Convertisseur HTML vers Texte retire les balises et rend la vue de lecture, le bon geste quand la livraison est un collage dans un document et non un déploiement. Et quand la configuration qui anime la page vit dans un fichier YAML à côté du balisage, le Formateur YAML accorde le même traitement à ce fichier. Coller, choisir un mode, lire la sortie, copier : la boucle entière reste dans l'onglet qui possède le fichier, du début à la fin.