Formateur et minificateur HTML

Qu’est-ce qu’un formateur HTML ?#

Un formateur HTML prend du balisage qui a perdu sa forme — la sortie d’un moteur de gabarit qui a replié toutes les balises sur une ligne, un extrait collé avec l’indentation de quelqu’un d’autre, ou un morceau de modèle d’e-mail qui a grossi sur des mois — et le réindente afin que l’imbrication saute aux yeux au premier coup d’œil. Le travail inverse, la compression, serre le même balisage en retirant tout ce dont un navigateur n’a pas besoin : les commentaires et les espaces entre les balises.

Cette page fait les deux, et les deux sens sont bâtis différemment parce que le HTML l’exige. Formater utilise html_beautify de js-beautify, qui indente les éléments de façon cohérente et préserve les sauts de ligne que vous voulez réellement. Compresser est un scanner conservateur écrit à la main. La règle la plus importante qu’il suit est que le contenu des éléments <pre>, <code>, <textarea>, <script> et <style> est laissé totalement intact — condenser les espaces à l’intérieur d’un bloc <pre> ou d’un <script> corromprait la page, parce que dans ces éléments les espaces font partie des données, pas de la décoration. Un minificateur naïf qui l’ignore est précisément comment un exemple de code perd soudain son indentation sur un site en production.

Mode d’emploi#

1. Collez votre balisage dans le panneau HTML à gauche, ou cliquez sur Exemple pour un court exemple de document.
2. Choisissez une Indentation dans la barre d’outils : 2, 4 (le défaut pour le HTML) ou tabulation. Quatre espaces est un style de maison courant pour le balisage parce que les balises imbriquées s’accumulent vite.
3. Cliquez sur une action :
   • Formater — réindenter via js-beautify, en préservant les sauts de ligne existants afin que les lignes coupées manuellement ne soient pas écrasées.
   • Compresser — retirer les commentaires HTML, condenser les espaces inter-balises en rien, et trimmer les espaces dans les nœuds textuels ordinaires — tout en laissant l’intérieur de <pre>, <code>, <textarea>, <script> et <style> exactement comme écrit.
4. Lisez le résultat dans le panneau Sortie. Utilisez Copier dans l’en-tête de sortie pour le récupérer ; Effacer réinitialise les deux panneaux.

Principales fonctionnalités#

• Préserve ce qui compte. Le contenu de <pre>, <code>, <textarea>, <script> et <style> est copié tel quel pendant la compression. Les espaces à l’intérieur de ces éléments ont un sens ; les retirer changerait ce que le navigateur rend.
• Commentaires retirés à la compression, conservés au formatage. Les blocs <!-- ... --> ne sont retirés que quand vous demandez explicitement la compression. Le formatage les laisse en place.
• Indentation par défaut adaptée au HTML. Quatre espaces, parce que le balisage profondément imbriqué se lit mieux avec un pas plus large. Basculez sur 2 ou tabulation si cela correspond à votre projet.
• Deux panneaux, prêt à copier. Entrée éditable, sortie en lecture seule, copie en un clic.
• S’exécute dans votre navigateur uniquement. js-beautify est embarqué avec la page et chargé à la demande ; pas de backend, pas de téléversement, votre balisage reste sur votre appareil.

Exemple détaillé#

Un fragment de carte produit tiré d’un gabarit, avec un commentaire et un bloc <pre> à l’intérieur :

Entrée :

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

Cliquez sur Formater avec 4 espaces :

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

Cliquez maintenant sur Compresser sur la même entrée :

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

Trois choses à noter. Le commentaire a disparu. Les espaces entre les balises ont disparu — le </span> et <pre> sont désormais directement adjacents, ce qui est sûr parce que les espaces inter-balises en HTML sont décoratifs. Mais le saut de ligne à l’intérieur du <pre> (npm install au-dessus de npm run build) est toujours là, exactement comme écrit. C’est la règle qui fait son travail : condenser la décoration, préserver les données.

FAQ#

Pourquoi certains espaces simples sont-ils conservés entre les balises après la compression ?#

Les nœuds textuels réduits à des espaces situés entre des balises de bloc sont entièrement retirés. Mais un seul espace à l’intérieur d’une ligne de texte — Hello <em>world</em> — est significatif, parce que le retirer joindrait les mots. Le scanner conserve les espaces significatifs des nœuds textuels et ne retire que les espaces inter-balises purement décoratifs.

La compression retire-t-elle les attributs, les guillemets ou les valeurs par défaut ?#

Non. Elle ne réécrit pas la syntaxe des attributs, ne retire pas les guillemets, ne condense pas les attributs booléens et ne supprime pas type="text". Ces transformations exigent un analyseur HTML complet avec connaissance du schéma et sont faciles à rater ; cet outil reste du bon côté et ne retire que les commentaires et les espaces décoratifs.

Va-t-il compresser le JavaScript à l’intérieur de mes balises <script> ?#

Non. Tout le contenu d’un <script> passe intact — à la fois parce que le modifier pourrait casser l’ASI et parce qu’un minificateur JS distinct vit sur la page format/js. Si vous voulez le script minifié, extrayez-le, passez-le par cet outil, puis recollez-le.

Comprend-il la syntaxe de gabarits comme {{ var }} ou {% if %} ?#

Formater réindentera autour des jetons de gabarit et produira généralement une sortie lisible. Compresser traite les balises de gabarit comme du texte ordinaire, donc il ne condensera pas les espaces à l’intérieur d’une manière qui changerait leur sens. Pour du templating lourd, traitez la sortie comme un point de départ solide et vérifiez contre votre moteur de rendu.