Aller au contenu

Formateur HTML

Rendez votre HTML lisible avec une indentation propre, ou compactez-le.

Plus d'options
Fonctionne dans votre navigateur : vos données ne sont pas envoyées.

Mode d'emploi

  1. Collez votre code HTML dans la zone de saisie.
  2. Dans « Mode », choisissez « Formater » pour indenter le code ou « Minifier » pour le rendre plus compact.
  3. En mode « Formater », réglez « Indentation » sur « 2 espaces », « 4 espaces » ou « Tabulation ».
  4. Cliquez sur « Formater le HTML » (ou sur « Minifier le HTML » en mode « Minifier »), ou appuyez sur Ctrl+Entrée sous Windows ou Linux, ou Cmd+Entrée sur Mac.

Exemples

Indenter une page avec du CSS intégré

Entrée
<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>Librairie du Canal</title><style>body{font-family:sans-serif}h1{color:#245c42}</style></head><body><h1>Librairie du Canal</h1><p>Ouvert du mardi au samedi à Nantes.</p></body></html>
Sortie
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Librairie du Canal</title>
        <style>
            body {
                font-family: sans-serif
            }

            h1 {
                color: #245c42
            }
        </style>
    </head>
    <body>
        <h1>Librairie du Canal</h1>
        <p>Ouvert du mardi au samedi à Nantes.</p>
    </body>
</html>

Séparer les attributs d’un champ de formulaire

Entrée
<label for="courriel">Votre adresse e-mail</label><input type="email" id="courriel" name="courriel" placeholder="camille@exemple.fr" autocomplete="email" required>
Sortie
<label for="courriel">Votre adresse e-mail</label><input type="email"
  id="courriel"
  name="courriel"
  placeholder="camille@exemple.fr"
  autocomplete="email"
  required>

Minifier un extrait HTML avec un commentaire

Entrée
<!-- Présentation de la boutique -->
<section class="boutique">
  <h2>Nos produits locaux</h2>
  <p>Découvrez le <strong>miel de Bretagne</strong> et nos confitures.</p>
</section>
Sortie
<section class="boutique"><h2>Nos produits locaux</h2><p>Découvrez le <strong>miel de Bretagne</strong> et nos confitures.</p></section>

FAQ

Le formateur vérifie-t-il les erreurs HTML ?

Il signale les balises non fermées, les balises fermantes sans ouverture correspondante et les attributs en double, avec leur numéro de ligne. Ces avertissements ne bloquent pas le résultat et ne remplacent pas une validation W3C. Cliquez sur un avertissement pour retrouver la ligne concernée.

Peut-on indenter le HTML sans modifier le CSS et le JavaScript ?

Décochez « Formater le CSS et le JS intégrés ». Le contenu des balises style et script reste alors tel que vous l’avez saisi.

Les espaces dans les balises pre et textarea sont-ils conservés ?

Le contenu de ces balises reste inchangé, en mode « Formater » comme en mode « Minifier ».

Quels fichiers HTML peut-on importer ?

Les extensions acceptées sont .html, .htm, .xhtml, .xml, .svg, .vue et .txt. Les fichiers de plus de 10 Mo sont refusés.

Mon code HTML est-il envoyé à un serveur ?

Le formatage et la minification s’effectuent dans votre navigateur, sans envoyer votre HTML à un serveur. Dans cet outil, le code est affiché comme du texte : ses images ne sont pas chargées et ses scripts ne sont pas exécutés. Le HTML n’est pas enregistré ; seuls vos réglages sont conservés dans localStorage.