Utilia
Catégories ▾
Langue: fr ▾

Formateur HTML

Indentez proprement un code HTML désordonné ou minifiez-le sans risque, dans votre navigateur. Le CSS et le JavaScript intégrés sont aussi formatés.

Comment formater du HTML

  1. Collez votre HTML ou cliquez sur Ouvrir un fichier pour charger un fichier .html ou .htm (10 Mo au maximum).
  2. Choisissez l’Indentation (2 espaces, 4 espaces ou une tabulation) et, si vous le souhaitez, Couper les lignes à 80 ou 120 caractères.
  3. Cochez Indenter et pour les décaler d’un niveau dans <html>, et Supprimer les commentaires pour retirer les commentaires <!-- … -->.
  4. Cliquez sur Formater (indenter) pour un code lisible, ou sur Minifier pour la version la plus légère sans risque.
  5. Copiez ou téléchargez le résultat. La ligne d’état indique la taille avant et après.

Le résultat s’affiche comme du texte brut dans la zone de sortie. Votre HTML n’est jamais interprété ni exécuté dans cette page : les scripts du code collé ne peuvent rien faire.

Indenter : un HTML lisible et cohérent

Formater (indenter) s’appuie sur js-beautify, le formateur utilisé par de nombreux éditeurs de code :

  • les éléments de type bloc passent sur leur propre ligne, décalés selon leur profondeur, tandis que les éléments en ligne comme <a>, <b> ou <span> restent dans le texte ;
  • le contenu des balises <script> et <style> est mis en forme comme du JavaScript et du CSS ;
  • <pre> et <textarea> sont laissés tels quels, puisque leurs espaces sont visibles à l’écran ;
  • plusieurs lignes vides consécutives sont réduites à une seule ;
  • avec une largeur de coupure, les longues lignes de texte et les longues listes d’attributs sont renvoyées à la ligne.

L’indentation ne répare pas un balisage cassé : une <div> non fermée le reste, et le décalage des lignes suivantes montre justement où se trouve le problème.

Minifier : un HTML plus léger, sans changer la page

Minifier suit une approche volontairement prudente :

  • les suites d’espaces, de tabulations et de retours à la ligne dans le texte deviennent une seule espace, exactement comme le navigateur les affiche ;
  • les espaces autour des éléments de type bloc et des éléments de l’en-tête (<div>, <p>, <li>, <td>, <meta>, <br>…) sont supprimés, car ils ne sont jamais affichés ;
  • une espace entre deux éléments en ligne est conservée : <b>bon</b> <i>jour</i> ne devient pas « bonjour » ;
  • les commentaires sont retirés si Supprimer les commentaires est coché, sauf les commentaires conditionnels (<!--[if IE]>) et ceux qui commencent par <!--! ;
  • le contenu de <script>, <style>, <pre> et <textarea> n’est jamais modifié, et les valeurs d’attributs sont gardées à l’identique, guillemets compris.

L’outil ne retire pas les balises fermantes facultatives, ne réécrit pas les attributs et ne compresse pas le JavaScript ni le CSS intégrés : ces optimisations font gagner un peu plus, mais peuvent casser une page. Pour la plupart des sites, la compression HTTP (gzip ou Brotli) économise bien davantage que n’importe quel minificateur ; la minification sert surtout pour du HTML intégré à un courriel, à un gabarit ou à une chaîne JavaScript.

Questions fréquentes

Mon code est-il envoyé sur un serveur ?

Non. Le formatage comme la minification se font dans votre navigateur ; votre code ne quitte jamais votre ordinateur.

Pourquoi ma page s'affiche-t-elle différemment après minification ?

Cela ne devrait pas arriver dans les cas courants. Seule exception : un CSS qui change l’affichage des espaces, par exemple white-space: pre sur un autre élément que <pre> ou <textarea>, ou un élément de bloc passé en affichage en ligne : les espaces réduits y deviennent visibles.

L'outil valide-t-il mon HTML ?

Non. Il met en forme ce que vous lui donnez. Pour vérifier la validité du balisage, utilisez un validateur comme le Nu HTML Checker du W3C.

Puis-je formater des gabarits Vue, Svelte ou Django ?

En grande partie. Les balises de gabarit dans le texte et les attributs sont conservées, mais une syntaxe complexe peut perturber l’indentation : relisez le résultat.

Que change l'option « Indenter <head> et <body> » ?

Par défaut, <head> et <body> démarrent au même niveau que <html>, une convention répandue qui économise un niveau d’indentation. Cochez l’option pour les décaler d’un niveau supplémentaire.

Outils similaires