Comment utiliser : Formateur HTML
- Collez votre HTML dans la zone HTML source, déposez un fichier
.htmldedans ou cliquez sur Exemple. - En mode Embellir, choisissez l’indentation (2 espaces, 4 espaces ou tabulations), la largeur de retour à la ligne et la mise en forme des attributs.
- Le résultat formaté se met à jour pendant la saisie. Utilisez Copier ou Télécharger pour l’enregistrer.
- Besoin de l’inverse ? Passez en mode Minifier pour supprimer les commentaires et réduire les espaces pour la production.
Qu’est-ce qu’un formateur HTML ?
Un formateur HTML (ou embellisseur) réécrit le balisage avec un élément par ligne et une indentation cohérente qui reflète l’arborescence du document, pour voir d’un coup d’œil où se ferme chaque <div>. C’est le moyen le plus rapide de lire le code source d’un export de constructeur de pages, d’un modèle d’e-mail, d’un extrait de CMS ou d’un HTML minifié pour la production. Cet outil utilise le moteur open source js-beautify, le même que le formateur HTML intégré à VS Code, et formate aussi le CSS contenu dans les balises <style> ainsi que le JavaScript des balises <script>.
Options d’embellissement expliquées
| Option | Ce qu’elle fait |
|---|---|
| Indentation | Deux espaces est la convention la plus courante pour le HTML ; les tabulations permettent à chaque développeur de choisir sa propre largeur visuelle. |
| Retour à la ligne | Coupe les longues lignes de texte et d’attributs environ à la colonne choisie. « Désactivé » garde le contenu de chaque élément sur une seule ligne. |
| Attributs | « Un par ligne » place chaque attribut sur sa propre ligne lorsqu’une balise en contient plusieurs — pratique pour les longues balises Tailwind ou Alpine.js et pour des diff git propres. |
| Indenter <head> & <body> | Indente les enfants de <head> et <body> d’un niveau supplémentaire au lieu de les aligner sur <html>. |
| Conserver les lignes vides | Conserve (au maximum) une ligne vide volontaire entre les blocs au lieu de toutes les supprimer. |
Les éléments en ligne comme <a>, <strong> et <span> restent dans leur ligne de texte, et le contenu de <pre> et <textarea> n’est jamais modifié, car changer les espaces à cet endroit modifierait ce que voit l’utilisateur.
Fonctionnement du minifieur HTML sécurisé
Les espaces en HTML ne sont pas toujours sans effet : <b>Bonjour</b> <i>monde</i> affiche un espace visible entre les mots. Le minifieur adopte donc une approche prudente :
- Supprime les commentaires, sauf les commentaires conditionnels d’Internet Explorer (cochez Conserver les commentaires pour tous les garder).
- Réduit les suites d’espaces, de tabulations et de sauts de ligne dans le texte à un seul espace — exactement ce que le navigateur affiche de toute façon.
- Ne supprime les espaces que là où ils ne peuvent jamais s’afficher : dans
<head>, autour de<html>,<body>, les lignes de tableau et les conteneurs de listes. - Nettoie les balises (
<p class = "a">devient<p class="a">) sans modifier les valeurs des attributs. - Laisse intacts
<pre>,<textarea>et les scripts de type modèle, minifie le CSS intégré, compacte le JSON-LD et ne minifie le JavaScript intégré que s’il passe une vérification de syntaxe.
La réduction typique est de 10 à 25 % avant compression gzip. Pour une chaîne de build complète, des outils comme html-minifier-terser peuvent aller plus loin (suppression des balises ou guillemets optionnels), au prix de transformations plus risquées. Pour réduire spécifiquement les feuilles de style, utilisez le Minifieur CSS ; pour les scripts, le Formateur JavaScript dispose de son propre mode de minification.
Problèmes courants
L’indentation semble incorrecte après une balise. C’est généralement un élément non fermé (un </div> manquant) : le formateur indente fidèlement tout ce qui suit d’un niveau de plus, ce qui rend l’erreur facile à repérer. La syntaxe de modèle comme Handlebars, Liquid, Jinja ou les blocs PHP est détectée et préservée, mais une logique de modèle complexe dans les attributs peut tout de même produire des retours à la ligne inhabituels.
Aussi recherché comme : indenter html, beautifier html, minifier html, formater html en ligne, html prettifier, compresser html, nettoyer code html, décompresser html.
Outils complémentaires : Formateur HTML
- Formateur CSS — Transformez une feuille de style minifiée en CSS lisible, avec une propriété par ligne et des blocs @media correctement imbriqués.
- Encodeur d'entités HTML — Échappez < > & " pour afficher du texte en sécurité dans une page HTML, convertissez les accents et symboles en entités nommées ou numériques, ou décodez un HTML rempli d'entités pour retrouver le texte brut.
- HTML vers Markdown — Collez du HTML, ou copiez du texte enrichi directement depuis une page web, un Google Doc ou un e-mail, puis obtenez un Markdown soigné à intégrer dans un README, un wiki ou un site statique.
- Markdown vers HTML — Rédigez ou collez du Markdown et obtenez instantanément du HTML propre, avec un aperçu en direct nettoyé, des tableaux GFM, des listes de tâches et des blocs de code délimités.
Questions fréquentes
Mon HTML est-il envoyé quelque part ?
L’embellissement modifiera-t-il l’apparence de ma page ?
display:inline-block. Le contenu de <pre> et <textarea> n’est jamais modifié.Quelle est la différence entre formater et valider du HTML ?
Le CSS et le JavaScript présents dans le HTML sont-ils formatés ?
<style> et <script> est formaté avec les mêmes réglages d’indentation. Les types JSON et de scripts de modèle sont conservés tels quels.De combien le HTML minifié est-il réduit ?
Puis-je formater des modèles Vue, Angular ou Svelte ?
v-if, @click ou [prop]. Les composants monofichiers avec <script setup> et TypeScript sont formatés comme du HTML plus du script.