Formateur HTML
Mettez en forme, indentez et minifiez du HTML directement dans votre navigateur. Collez ou importez du balisage, choisissez votre style d'indentation, et obtenez instantanément du HTML propre et lisible ou une version minifiée compacte.
100% Traitement côté client
Votre HTML est analysé et mis en forme entièrement dans votre navigateur. Rien n'est envoyé à un serveur.
Mettez en forme le HTML avec une indentation cohérente pour que les balises imbriquées soient faciles à lire et à déboguer.
Aperçu en direct
L'aperçu s'affiche dans un cadre isolé avec les scripts désactivés : les balises <script> collées sont affichées mais jamais exécutées.
Table des matières
Qu'est-ce qu'un formateur HTML ?
Un formateur HTML remet en forme le balisage HTML, soit pour la lisibilité, soit pour la taille. En mode Formater (mise en forme), il réindente les balises imbriquées pour que la structure du document soit facile à parcourir et à déboguer. En mode Minifier, il supprime les commentaires et les espaces inutiles pour que le même balisage occupe moins d'octets.
Cet outil analyse votre HTML à l'aide de l'analyseur intégré du navigateur lui-même, le même moteur qui affiche les pages web, il traite donc du balisage réel et imparfait (balises non fermées, casse mélangée, guillemets manquants) exactement comme le ferait un navigateur, puis le réécrit proprement.
Comment ça marche
- Ajoutez votre HTML : collez le HTML directement dans l'éditeur, ou importez un fichier .html.
- Choisissez un mode : basculez entre Formater pour mettre en forme avec indentation, ou Minifier pour compresser en vue de la production.
- Ajustez les options : choisissez une taille d'indentation (2, 4, 8 espaces, ou une tabulation) en mode Formater, ou décidez de supprimer les commentaires en mode Minifier.
- Copiez ou téléchargez : copiez le résultat dans le presse-papiers ou téléchargez-le sous forme de fichier .html.
Fonctionnalités
- Collez du HTML ou importez un fichier .html
- Mode mise en forme avec indentation de 2, 4, 8 espaces ou tabulation
- Mode minification qui supprime les espaces et sauts de ligne
- Suppression optionnelle des commentaires en mode Minifier
- Préserve exactement le contenu de <pre>, <script>, <style> et <textarea>
- Garde les éléments en ligne comme <a>, <strong> et <em> intégrés naturellement au texte environnant
- Aperçu isolé en direct pour confirmer qu'aucun changement visuel n'a eu lieu
- Statistiques de taille de sortie, nombre de lignes et pourcentage de réduction
- Copie dans le presse-papiers ou téléchargement en .html
- Traitement 100% côté navigateur pour la confidentialité
Bonnes pratiques
- Mettez en forme avant la revue de code : une indentation cohérente permet à vos collègues de repérer beaucoup plus facilement les problèmes structurels dans un diff.
- Ne minifiez que votre sortie finale : conservez un fichier source lisible et mis en forme, et minifiez comme étape de build, pas comme le fichier que vous éditez au quotidien.
- Vérifiez l'aperçu après minification : confirmez que la page affichée reste identique, en particulier pour le texte en ligne sensible aux espaces.
- Ne supprimez les commentaires qu'une fois le débogage terminé : les commentaires apportent souvent du contexte pour la prochaine personne qui touchera le fichier, donc conservez-les dans votre source et ne les supprimez que dans le build minifié.
- Alignez la largeur d'indentation avec celle de votre équipe : réglez la taille d'indentation sur la configuration de l'éditeur de votre projet (par exemple .editorconfig) pour que la sortie formatée ne génère pas de diffs bruyants.
Dépannage
Le résultat formaté est différent de ce que j'ai collé
L'analyseur HTML du navigateur corrige automatiquement les problèmes structurels comme les balises non fermées ou les guillemets manquants, donc le résultat reflète la structure corrigée, ce qui correspond à la façon dont un vrai navigateur afficherait votre balisage d'origine.
L'ordre ou les guillemets des attributs ont changé
Les attributs sont re-sérialisés dans leur ordre d'analyse, et les attributs booléens comme disabled sont écrits sans valeur. Cela n'affecte pas le rendu, mais peut modifier un diff textuel.
Le texte dans <pre> ou <script> semble intact
C'est voulu : le contenu à l'intérieur de <pre>, <script>, <style> et <textarea> est préservé exactement tel quel, car les espaces et sauts de ligne y sont souvent significatifs.
La sortie minifiée contient encore des espaces
Un seul espace est conservé entre les mots à l'intérieur d'une ligne de texte pour éviter qu'ils ne se collent ; seuls les espaces redondants entre les balises et les espaces répétés sont supprimés.
Cas d'usage courants
- Nettoyer du HTML scrapé ou exporté : remettez en forme du balisage issu d'un export CMS, d'un modèle d'e-mail ou d'un scraper web pour qu'il redevienne lisible.
- Revue de code et débogage : mettez en forme du HTML minifié ou compressé en production pour retrouver un problème de mise en page ou de balisage.
- Réduire le poids de la page : minifiez des modèles HTML statiques ou du balisage d'e-mail avant le déploiement pour réduire la taille de transfert.
- Standardiser une base de code : remettez en forme les fichiers HTML avec un style d'indentation cohérent avant de les valider dans un dépôt partagé.
- Préparer des extraits HTML pour la documentation : mettez en forme des exemples HTML intégrés pour qu'ils soient faciles à lire dans un tutoriel ou un README.
Questions fréquentes
Non. L'aperçu s'affiche dans un iframe isolé avec les scripts désactivés, donc les balises <script> collées sont affichées mais jamais exécutées.
Non. Les deux modes ne changent que les espaces, l'indentation et la sérialisation des attributs ; la structure réelle du balisage et le rendu visible restent identiques.
Il utilise l'analyseur intégré du navigateur, qui corrige automatiquement les problèmes courants comme les balises non fermées, donc le résultat est toujours valide, mais il ne signale ni n'explique ce qui a été corrigé.
Il est préservé exactement tel quel dans les modes Formater et Minifier, car les espaces à l'intérieur de ces éléments sont souvent significatifs.
Oui. En mode Formater, choisissez 2, 4 ou 8 espaces, ou un caractère de tabulation.
Seulement si vous activez l'option « Supprimer les commentaires HTML » ; par défaut, les commentaires sont conservés.
Non. Tout se passe localement dans votre navigateur, rien n'est envoyé ni enregistré.