CodeKitHub
Français
Outils de code

Minificateur et Formateur HTML

Collez votre HTML ci-dessous pour le minifier — en supprimant les commentaires, attributs redondants et espaces superflus — ou pour le formater en balisage lisible et indenté. Les deux modes utilisent un véritable analyseur HTML, pas un bricolage à base d'expressions régulières, donc le contenu à l'intérieur de <pre> et <textarea> reste intact.

En quoi consiste cet outil ?

Un minificateur HTML supprime tout ce dont un navigateur n'a pas besoin pour afficher correctement une page : commentaires, espaces superflus entre les balises, attributs redondants comme type="text/javascript", et barres de fermeture optionnelles. Le résultat est un HTML fonctionnellement identique qui se télécharge et s'analyse plus vite.

Cet outil repose sur html-minifier-terser, le même minificateur utilisé dans des outils de build populaires ; il comprend donc la structure du HTML au lieu de supprimer les espaces aveuglément — il ne touche pas au contenu sensible au formatage dans <pre>, <textarea> ou les blocs <script>/<style> en ligne, et peut aussi minifier le CSS et le JS intégrés dans votre balisage.

Pourquoi l'utiliser ?

  • Véritable analyseur, pas des expressions régulières — fiable sur des cas limites comme les blocs <pre>, les scripts en ligne et les commentaires conditionnels.
  • Minifie aussi le contenu des <style> et <script> intégrés, pas seulement le balisage autour.
  • Affiche exactement combien d'octets vous avez économisés avant de publier le fichier.
  • Le mode Formater transforme du HTML compressé sur une seule ligne en quelque chose de lisible et modifiable à nouveau.
  • Traitement 100% local — votre balisage, et tout élément privé qu'il contient, ne quitte jamais votre navigateur.

Mode d'emploi

  1. Collez votre HTML dans le champ de saisie, ou cliquez sur "Charger un exemple" pour tester un échantillon.
  2. Cliquez sur "Minifier" pour le compresser, ou sur "Formater" pour l'embellir avec une indentation de 2 espaces.
  3. Vérifiez le message sous les champs — le mode minifier affiche la réduction de taille ; si le HTML ne peut pas être analysé, vous verrez l'erreur exacte au lieu d'un résultat cassé.
  4. Cliquez sur "Copier" pour récupérer le résultat.

Exemple

Entrée

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Résultat

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Commentaires, indentation et sauts de ligne sont supprimés ; le doctype est raccourci. La page visible s'affiche à l'identique.

Conseils pratiques

  • Minifiez juste avant le déploiement, pas pendant le développement — gardez du HTML lisible dans le contrôle de version et minifiez uniquement le résultat du build.
  • Si une page se comporte bizarrement après minification, vérifiez s'il y a du JavaScript qui dépend d'espaces exacts dans des nœuds de texte (rare, mais ça arrive avec certains widgets anciens).
  • Formater le HTML minifié d'un site en ligne est un moyen rapide d'inspecter sa structure avant d'écrire un scraper ou de déboguer des problèmes de mise en page.
  • Combinez avec les minificateurs CSS et JS ci-dessous si votre processus de build sépare les styles et scripts en fichiers distincts.

Sa place dans de vrais flux de travail

Les sites statiques, modèles d'e-mails et landing pages faits à la main sont souvent publiés avec la même indentation et les mêmes commentaires que pendant le développement. Minifier avant le déploiement réduit un poids de transfert réel, quoique modeste — et pour le HTML d'e-mail en particulier, le nombre de caractères affecte parfois le seuil de troncature de Gmail, donc un balisage plus petit a un avantage fonctionnel au-delà de la vitesse.

Le mode Formater est tout aussi utile dans l'autre sens : coller une page minifiée depuis l'affichage du code source et la reformater est souvent le moyen le plus rapide de comprendre la structure de la landing page d'un concurrent ou de déboguer un widget tiers.

Minificateur CSS · Minificateur JS

Cas d'usage courants

  • Réduire une landing page statique ou un modèle d'e-mail avant sa mise en ligne.
  • Reformater un extrait HTML minifié récupéré via "afficher le code source" pour en comprendre la structure.
  • Nettoyer du HTML collé depuis un éditeur WYSIWYG ou un export de CMS, qui contient souvent des espaces excessifs.
  • Vérifier rapidement si un extrait HTML écrit à la main est bien formé, une erreur d'analyse apparaissant clairement.

Foire aux questions

Mon HTML est-il envoyé quelque part ?

Non. La minification et le formatage se font localement dans votre navigateur avec JavaScript. Rien de ce que vous collez n'est envoyé à un serveur, ce qui rend l'outil sûr pour des modèles internes ou des pages non publiées.

La minification peut-elle casser ma page ?

Normalement non — l'outil utilise un véritable analyseur HTML (html-minifier-terser) qui comprend la structure des balises, préserve donc les éléments sensibles aux espaces comme <pre> et <textarea>, et ne fusionne pas les attributs de façon incorrecte. Vérifiez toujours les pages critiques après minification, surtout si elles dépendent de scripts en ligne inhabituels.

Minifie-t-il aussi le CSS et le JavaScript à l'intérieur du HTML ?

Oui. Les blocs <style> et <script> en ligne sont minifiés sur place avec les mêmes moteurs que les outils dédiés CSS et JS, vous n'avez donc pas besoin de les extraire manuellement.

De combien le HTML rétrécit-il généralement ?

Cela dépend de la quantité d'espaces, de commentaires et de mise en forme d'origine — un HTML écrit à la main avec beaucoup d'indentation et de commentaires rétrécit souvent de 20 à 40 %. Le HTML généré par un framework, déjà compact, économisera moins.

Puis-je reconvertir du HTML minifié en format lisible ?

Oui — collez le HTML minifié et cliquez sur "Formater" au lieu de "Minifier" pour retrouver un balisage correctement indenté et lisible.

Outils associés