Formateur HTML

Embellissez du HTML avec Prettier : indentation cohérente, un élément par ligne, CSS et JavaScript intégrés formatés aussi. 2, 4 espaces ou tabulations.

Indentation

Entrée HTML

Sortie

S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.

Outils Connexes

Voir Tout

Formateur JSON Validateur JSON Formateur XML camelCase snake_case kebab-case PascalCase CONSTANT_CASE

Qu'est-ce que Formateur HTML ?

Le formateur HTML réécrit le HTML avec une indentation propre et cohérente grâce à Prettier, le formateur utilisé par la plupart des projets front-end. Les blocs <style> et <script> intégrés sont également formatés en CSS et en JavaScript.

Comment utiliser Formateur HTML

Collez votre HTML dans la zone de saisie ou cliquez sur Charger un exemple.
Choisissez l'Indentation.
Cliquez sur Formater (le résultat se met aussi à jour pendant la saisie).
Copiez ou téléchargez le résultat.

Exemple

Entrée

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

Sortie

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

Quand utiliser Formateur HTML

Utilisez-le pour nettoyer du HTML issu d'exports de CMS, de modèles d'e-mails ou de balisage généré avant de l'éditer ou de le relire. C'est un formateur, pas un validateur : pour des balises non fermées ou des identifiants en double, utilisez le validateur HTML. Les très gros documents peuvent prendre un moment, car Prettier s'exécute dans votre navigateur.

Comment fonctionne Formateur HTML

Le code est formaté avec Prettier 3 (build autonome) et ses plugins HTML, CSS et Babel, chargés à la demande. Prettier analyse le balisage sous forme d'arbre puis le réécrit pour que les lignes tiennent dans 80 colonnes, en mettant les attributs entre guillemets et en ajoutant /> aux éléments vides. Les éléments en ligne sensibles aux espaces sont gardés ensemble pour que le rendu de la page ne change pas. Les erreurs de syntaxe sont signalées avec la ligne et la colonne de Prettier.