OnlineConverTools
Se connecter

Formateur HTML

Formatez votre HTML et rendez-le lisible

À propos de l’outil Formateur HTML

L’outil Formateur HTML réindente une page ou un fragment avec js-beautify, le moteur de beautifier.io, dans votre navigateur. Les éléments imbriqués reçoivent 2 espaces par niveau, et le contenu de <head> et de <body> est lui aussi indenté. Les blocs <script> et <style> intégrés sont formatés comme du JavaScript et du CSS. Les éléments vides comme <br> et <img> n’ouvrent pas de niveau, les attributs restent tels qu’ils sont écrits, et le contenu de <pre> et de <textarea> est laissé exactement tel quel, car les espaces y sont visibles. Les longues lignes ne sont pas coupées. L’outil ne valide pas le HTML : les balises non fermées sont formatées sans avertissement.

Exemple

Un extrait sur une seule ligne : le contenu de <pre> garde ses espaces, le script est formaté.

Entrée

<div><p>Hello <b>world</b></p><pre>  a
   b</pre><script>if(x){go()}</script></div>

Sortie

<div>
  <p>Hello <b>world</b></p>
  <pre>  a
   b</pre>
  <script>
    if (x) {
      go()
    }
  </script>
</div>

Comment formater du code HTML

  1. 1Collez du HTML, un document complet ou un extrait, dans « Entrée ».
  2. 2Cliquez sur « Formater ».
  3. 3Vérifiez le balisage indenté dans « Sortie ».
  4. 4Cliquez sur « Copier » ou « Télécharger » (« formatted.html »).

Formats et limites

Entrée
Document ou fragment HTML, sous forme de texte
Sortie
HTML indenté, enregistré sous formatted.html
Indentation
2 espaces par niveau ; lignes vides gardées, une seule à la suite au plus ; aucun retour à la ligne automatique
Non modifiés
Contenu de <pre> et de <textarea>, valeurs des attributs

Où votre HTML est traité

js-beautify est chargé dans la page la première fois que vous cliquez sur « Formater » et s’exécute sur votre appareil : votre balisage n’est donc pas envoyé à notre serveur. Si la page affiche un message d’erreur, notre journal des erreurs reçoit ce message épuré (passages entre guillemets, nombres longs et adresses retirés), ainsi que le nom de l’outil et le nom et la version de votre navigateur.

Questions fréquentes

Le formatage peut-il changer l’apparence de ma page ?

Non, dans la plupart des pages. Les éléments en ligne comme <b> restent sur leur ligne, et le texte de <pre> et de <textarea>, où chaque espace se voit, est recopié tel quel. Des retours à la ligne sont ajoutés entre les éléments de bloc comme <div> et <p>, où ils ne sont pas affichés.

Le CSS et le JavaScript intégrés sont-ils formatés ?

Oui. Le code dans <style> est formaté selon les règles du CSS et le code dans <script> selon celles du JavaScript, tous deux indentés d’un niveau de plus que leur balise, comme dans l’exemple ci-dessus.

L’outil répare-t-il un HTML défectueux ?

Non. Il indente ce que vous lui donnez sans le vérifier : une balise fermante manquante n’est pas ajoutée et aucune erreur ne s’affiche, si bien que l’indentation qui suit peut sembler décalée. Ce décalage peut vous aider à repérer le problème.

Trucs et astuces

  • ✓Pour réduire le HTML au lieu de le développer, utilisez l’outil Minificateur de code en mode HTML.

Outils associés