Formateur HTML

Qu'est-ce que le formatage HTML ?

Un formateur HTML est un outil qui effectue le formatage HTML (également appelé embellissement ou pretty-printing) : il ajoute une indentation, des sauts de ligne et des espacements cohérents au code HTML afin de rendre visible sa structure d'imbrication. Les navigateurs ignorent les espaces lors du rendu HTML, si bien qu'un document écrit sur une seule ligne produit le même résultat qu'un document soigneusement indenté. La différence est entièrement pour les humains : du HTML formaté est plus facile à lire, à déboguer et à maintenir.

La spécification HTML (maintenue par le WHATWG sous le nom HTML Living Standard) définit plus de 110 éléments, chacun avec son propre modèle de contenu. Les éléments de type bloc comme <div>, <section> et <article> commencent généralement sur une nouvelle ligne et indentent leurs enfants. Les éléments vides comme <br>, <img> et <input> n'ont pas de balise fermante ni d'enfants à indenter. Un bon formateur comprend ces distinctions et applique les règles d'indentation en conséquence, plutôt que d'ajouter aveuglément des espaces après chaque balise.

Le formatage est surtout utile pendant le développement. Le HTML minifié ou généré automatiquement, les sorties de plateformes CMS et le code copié depuis les DevTools du navigateur arrivent souvent sous forme d'une seule ligne dense. Sans indentation correcte, trouver une balise fermante manquante ou suivre une structure profondément imbriquée prend nettement plus de temps. Un formateur HTML transforme ce mur de texte en une arborescence lisible et correctement indentée en une seule étape.

Pourquoi utiliser ce formateur HTML ?

Collez n'importe quel HTML et obtenez instantanément une sortie correctement indentée. Pas de plugin à installer, pas de fichier de configuration à écrire, pas de compte à créer.

Cas d'utilisation du formateur HTML

Règles d'indentation HTML

La façon dont un formateur HTML traite chaque type d'élément dépend de son modèle de contenu. Le tableau ci-dessous montre les éléments courants et leur indentation avec les paramètres 2 espaces et 4 espaces. Les deux produisent un rendu identique dans le navigateur ; la différence est la lisibilité.

Formateur vs. Minifieur vs. Linter

Ces trois outils opèrent sur du HTML mais servent des objectifs différents. Le formatage et la minification sont des transformations opposées ; le linting vérifie les erreurs sans modifier les espaces.

Exemples de code

Comment formater du HTML par programmation dans les langages et outils populaires :

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Questions fréquemment posées