Formater du HTML

Comment ça marche

Le code source d'une page, un modèle d'e-mail ou l'export d'un créateur de site arrivent souvent en HTML sur une seule ligne ou avec un retrait dans tous les sens. Collez le code dans le volet de gauche. À droite, chaque balise de bloc (div, ul, li, table, p) passe sur sa propre ligne, décalée d'un cran par niveau d'imbrication. Vous voyez alors quelle </div> ferme quelle <div> et où finit une liste. Le CSS de <style> et le JavaScript de <script> sont mis en forme avec le même retrait. Le contenu de <pre> et de <textarea> n'est pas touché, car chaque espace y est visible sur la page. Les balises en ligne comme a, span et strong restent sur la ligne de leur texte. Les lignes longues sont coupées à 120 caractères par défaut ; si vous ne le voulez pas, réglez Lignes longues sur Laisser telles quelles. La ligne de résultat indique combien de lignes vous obtenez. Si vous réglez Que faut-il faire ? sur Minifié, l'outil fait l'inverse : commentaires et espaces entre les balises disparaissent, sans toucher au contenu de <style> et <script> dans ce mode.

Cet outil est aussi connu sous le nom de formater html, html formatter en ligne, indenter du html, embellir du html, html beautifier, mettre en forme code html.

Qu'est-ce que HTML ?

Le HTML (HyperText Markup Language) est le langage de balisage qui donne sa structure à une page web : titres, paragraphes, listes, tableaux, liens et images sont chacun marqués par une balise (<h2>, <p>, <ul>, <a>), et les balises s'emboîtent pour former un arbre. Le navigateur réduit la plupart des espaces et retours à la ligne entre balises ; la même page peut donc tenir sur une ligne ou être bien indentée, le retrait ne servant qu'à montrer cet arbre aux personnes.

Qu'est-ce que Élément de bloc et élément en ligne ?

Les éléments de bloc (div, p, ul, table, h1-h6) commencent sur une nouvelle ligne et prennent toute la largeur disponible ; les éléments en ligne (a, span, strong, img) se placent dans le fil du texte. Pour la mise en forme, la différence compte : un retour à la ligne entre deux blocs ne change rien à l'écran, alors qu'entre deux éléments en ligne il s'affiche comme une espace. C'est pour cela qu'un outil de mise en forme garde les éléments en ligne sur la ligne de leur texte.

Quelle différence entre formater et minifier du HTML ?

Formater ajoute retraits et retours à la ligne pour qu'on puisse lire le code ; le fichier grossit et la page reste identique. Minifier fait l'inverse : suppression des commentaires et des espaces inutiles entre balises, avec en option la compression du CSS et du JavaScript intégrés ; le fichier maigrit mais devient difficile à lire. Aucun des deux ne touche au contenu de <pre>. On garde souvent la source indentée et on publie la copie minifiée.

Mettre en forme n'est pas valider

L'outil range le HTML mais ne le contrôle pas : une balise non fermée, des éléments mal imbriqués ou un attribut mal écrit ne sont pas signalés. La validation officielle se fait avec le validateur du W3C, et ce service envoie votre code à son propre serveur ; cette page n'envoie rien nulle part, elle ne fait donc pas ce travail.

Le retrait révèle tout de même les erreurs : quand une <div> n'est jamais fermée, tout ce qui suit se retrouve un cran trop à droite, et la fin du document montre une drôle de série de balises fermantes. La mise en forme ne change pas l'aspect de la page, à une exception près : un retour à la ligne ajouté entre deux éléments en ligne s'affiche comme une espace. C'est pourquoi les lignes longues sont coupées entre les mots dans le texte courant.

Indenté ou minifié ?

Le HTML indenté sert à lire et à modifier : comprendre un modèle, trouver une erreur, envoyer du code à un collègue. Le HTML minifié sert à la mise en ligne : les modèles d'e-mail ont des limites de taille et chaque kilo-octet compte pour la vitesse d'une page.

L'option Minifié de cette page ne compresse que le HTML lui-même : commentaires supprimés (sauf les commentaires conditionnels pour l'ancien Internet Explorer), espaces entre balises retirés, <pre> et <textarea> protégés. Pour minifier aussi le CSS et le JavaScript intégrés, garder les commentaires ou voir une comparaison avant/après en octets, utilisez l'outil Minifier du HTML.

Questions fréquentes

Comment mettre en forme un HTML écrit sur une ligne ?

Collez le code dans le volet de gauche de cette page. Chaque balise de bloc passe sur sa ligne et reçoit un retrait selon son niveau d'imbrication. Copiez le résultat ou téléchargez-le en fichier .html.

La mise en forme change-t-elle l'aspect de la page ?

Pas entre les balises de bloc, car le navigateur y ignore les espaces. Un retour à la ligne ajouté entre deux éléments en ligne comme span ou a s'affiche comme une seule espace ; l'outil garde donc les éléments en ligne sur une même ligne autant que possible. Le contenu de <pre> et <textarea> n'est jamais modifié.

L'outil montre-t-il les erreurs de mon HTML ?

Non, ce n'est pas un validateur. Une balise restée ouverte se voit au retrait qui glisse vers la droite, mais elle n'est pas signalée comme erreur. Pour une validation officielle, il existe le validateur du W3C, qui envoie votre code à son serveur.

Mon code est-il envoyé quelque part ?

Non. La mise en forme se fait dans votre navigateur ; le HTML collé ne quitte pas cette page et n'est enregistré nulle part.