Formateur HTML

À quoi sert un formateur HTML

Le HTML arrive souvent dans un état difficile à lire. Un export de CMS met toute une page sur une ligne. Un moteur de templates laisse des trous bizarres. Afficher le code source dans le navigateur vous donne ce que le serveur a envoyé, tel quel. Un formateur HTML reconstruit l’indentation pour que chaque élément imbriqué soit un niveau plus loin que son parent, et vous voyez d’un coup d’œil la structure de la page.

Cette page utilise Prettier 3 dans votre navigateur. En plus du balisage, elle formate le CSS des balises style et le JavaScript des balises script : une page complète ressort propre en une seule passe.

Mode d’emploi

1. Collez votre HTML dans la zone de gauche. Le formatage démarre dès le collage.
2. Ou appuyez sur Ouvrir un fichier pour charger un fichier .html, ou sur Exemple pour essayer un exemple.
3. Choisissez l’Indentation : 2 espaces, 4 espaces ou tabulations.
4. Réglez la Largeur de ligne. Les lignes avec beaucoup d’attributs ou un long texte passent à la ligne à cette largeur.
5. Choisissez un mode Espaces : Respecter l’affichage CSS, Ignorer ou Strict. Le mode par défaut est le plus sûr.
6. Appuyez sur Formater ou Ctrl+Entrée. Appuyez sur Minifier pour la version compacte.
7. Appuyez sur Copier, ou sur Télécharger pour enregistrer un fichier .html.

Une fois le formateur lancé, le résultat se met à jour pendant la frappe. Si un bloc script ou style de la page contient une erreur de syntaxe, ce bloc est laissé tel quel et le reste de la page est quand même formaté. Pour trouver l’erreur, collez le script dans le formateur JavaScript, qui indique la ligne et la colonne.

Avant et après

Une seule ligne de HTML :

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

Après Formater avec 2 espaces :

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

Les deux liens du nav restent sur une ligne. Il n’y a pas d’espace entre eux dans la source, et ajouter un saut de ligne créerait un écart visible entre eux. C’est le mode Respecter l’affichage CSS qui agit.

Les blocs intégrés sont formatés selon leurs propres règles :

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

L’option Espaces

En HTML, un saut de ligne entre deux éléments en ligne s’affiche comme une espace. C’est pourquoi les formateurs doivent être prudents. Voici le même paragraphe avec une largeur de ligne de 40.

Avec Respecter l’affichage CSS :

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

Avec Ignorer :

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

La seconde version paraît nette, mais le navigateur affiche désormais une espace avant la virgule et avant le point. N’utilisez Ignorer que pour un balisage où cela ne compte pas, comme des modèles d’e-mail vérifiés à l’œil, ou du HTML proche du XML sans texte en ligne. Notez qu’en français, une espace avant le point d’exclamation ou le point-virgule est voulue, mais le mode Ignorer en ajoute aussi avant les virgules et les points, ce qui reste une faute.

Minifier du HTML

Minifier réduit la page sans changer ce qu’elle affiche. Pour cette saisie :

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

le résultat est :

<div class="card"><p>Only <b>$5</b> today</p></div>

Les commentaires sont retirés, les espaces répétées deviennent une seule, et les espaces à côté des éléments de bloc comme div et p disparaissent. Les espaces entre les mots en ligne restent, car les retirer collerait les mots. Le contenu de pre, textarea et script n’est pas touché, et le CSS des balises style est minifié avec les mêmes règles prudentes que le formateur CSS. Les entités et les caractères accentués comme é ou é sont conservés tels quels.

Limites

• Le HTML est tolérant, donc une balise fermante manquante n’est souvent pas une erreur. La saisie <div><p>Hello</div> revient sous la forme <div><p>Hello</p></div>, avec le paragraphe fermé pour vous. Surveillez le résultat pour repérer les balises oubliées.
• Le formatage ne valide pas les attributs, ne vérifie pas l’accessibilité et ne corrige pas une imbrication invalide. Utilisez le validateur du W3C pour cela.
• Une syntaxe de template comme Handlebars ou Jinja peut perturber l’analyseur. Formatez le HTML rendu, ou utilisez un formateur conçu pour ce langage de template.

Autres façons de formater du HTML

• VS Code a un formateur HTML intégré. Lancez Mettre en forme le document (Maj+Alt+F sous Windows, Maj+Option+F sous macOS). L’extension Prettier donne un résultat identique à cette page.
• Ligne de commande : npx prettier --write index.html.
• Les outils de développement du navigateur montrent un arbre DOM formaté dans le panneau Éléments, mais c’est la page en direct après exécution des scripts, pas votre source.

Si vous avez besoin du contenu d’une page en Markdown plutôt qu’en HTML, le convertisseur HTML en Markdown s’en charge. Pour les scripts hors de la page, utilisez le formateur JavaScript.