Aller au contenu
fr
Tous les outils

Catégories

Outils développeurEncodage & décodageJSON & donnéesHash & checksumOutils de texteDate & heureOutils réseauOutils de fichiersMarkdown & diagrammes

Formateur HTML

Collez du HTML minifié ou désordonné et obtenez un balisage propre, indenté de façon cohérente, facile à lire et à comparer.

Traité localement dans votre navigateur

Options
0 caractères · 0 lignes
Le résultat apparaîtra ici.

Qu'est-ce que Formateur HTML ?

Le HTML produit par des outils de build, des éditeurs de CMS ou « afficher la source » tient souvent sur une seule longue ligne ou est indenté de façon irrégulière. Un formateur remet le balisage en page avec un niveau d’indentation par niveau d’imbrication, ce qui rend visible la structure du document.

Cet outil utilise l’embellisseur HTML js-beautify. Vous choisissez 2, 4 ou 8 espaces ou des tabulations, une largeur de retour à la ligne, un attribut par ligne, l’indentation de head et body, et la conservation ou non des lignes vides. Les éléments en ligne comme <a> et <strong> restent en ligne : le flux du texte n’est pas modifié.

Comment ça marche ?

  1. Collez votre HTML dans la zone de saisie ; le résultat formaté s’affiche au fil de la frappe.
  2. Sélectionnez l’indentation (espaces ou tabulations) et la largeur de retour à la ligne, 0 désactivant le retour automatique.
  3. Activez un attribut par ligne si vos balises en portent beaucoup, et choisissez de garder ou non les lignes vides.
  4. Copiez ou téléchargez le HTML formaté.

Cas d'usage courants

  • Lire une page minifiée ou un gabarit d’e-mail pour repérer une balise fermante manquante.
  • Normaliser l’indentation avant de versionner du HTML.
  • Rendre la sortie d’un composant lisible en diff pour comparer deux versions.
  • Préparer un extrait pour une documentation ou un rapport de bug.

Exemples

Essayez cette saisie dans l'outil ci-dessus :

Entrée
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav><main><h1>Hello</h1><p>This is a <strong>sample</strong> page with <em>inline</em> text.</p></main></body></html>
Sortie
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>

  <body>
    <nav class="menu">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <main>
      <h1>Hello</h1>
      <p>This is a <strong>sample</strong> page with <em>inline</em> text.</p>
    </main>
  </body>

</html>

Confidentialité

Formateur HTML s'exécute entièrement dans votre navigateur. Le texte ou les fichiers que vous fournissez sont traités sur votre appareil et ne sont ni envoyés, ni journalisés, ni stockés sur nos serveurs.

Limites

L’embellisseur ne valide pas le HTML et ne corrige pas les erreurs comme les balises non fermées ; les espaces peuvent aussi compter dans <pre> ou dans le texte en ligne, relisez donc le résultat avant publication.

Questions fréquentes

Le formatage change-t-il l’affichage de la page ?

Il ne modifie que les espaces entre les balises. Les éléments en ligne restent en ligne et le contenu de <pre> est préservé, mais ajouter des sauts de ligne peut changer l’espacement du texte dans des mises en page inhabituelles.

À quoi sert l’option de retour à la ligne ?

Les lignes plus longues que la largeur sont coupées aux espaces. Avec 0, chaque ligne garde la longueur de la source, ce qui aide pour les longues valeurs d’attributs.

Mon HTML est-il envoyé à un serveur ?

Non. L’embellisseur est chargé dans votre navigateur et s’exécute localement : votre balisage n’est jamais téléversé.

Outils associés

Plus d'outils dans Outils développeur →