Formateur HTML qui conserve vos propres commentaires

Introduction

Le HTML récupéré sur un site en ligne, exporté depuis un constructeur de pages ou copié d'un modèle de courriel est souvent comprimé sur quelques lignes, sans aucune indentation : techniquement valide, mais difficile à lire pour une personne. Le formater fait l'inverse : il reconstruit les retours à la ligne et l'indentation qui rendent visible l'imbrication des balises, sans changer ce que fait le code. Cela compte dès que l'objectif est de lire ou d'étudier réellement le HTML, et pas seulement de le faire afficher par un navigateur — comprendre comment une page est structurée, relire le code rendu par un élève, ou chercher pourquoi quelque chose ne s'affiche pas correctement.

Comment cet outil met en forme votre code

Coller du HTML et cliquer sur « Formater » le reconstruit avec une indentation de deux espaces, un niveau d'imbrication par balise, de sorte qu'on voit d'un coup d'œil quels éléments se trouvent dans quels autres. Deux points méritent d'être connus sur sa façon de traiter le HTML du monde réel :

• Les commentaires sont conservés, pas supprimés. Les commentaires HTML, y compris les commentaires conditionnels et les blocs CDATA, passent inchangés — pratique si votre code contient une attribution, des notes de travail ou un commentaire de licence que vous devez garder.
• Les blocs <script> et <style> sont repositionnés, pas réécrits. Leur indentation est ajustée à l'endroit qu'ils occupent dans le HTML environnant, mais le JavaScript ou le CSS qu'ils contiennent n'est pas remis en forme pour lui-même. Si le code à l'intérieur d'un bloc script ou style était déjà en désordre, il le reste : seule sa position par rapport au HTML qui l'entoure est nettoyée. Utilisez JavaScript Beautifier ou CSS Beautifier directement sur ce contenu interne s'il a besoin de sa propre mise en forme.

Ce qu'il faut savoir avant de l'utiliser

Cet outil traite bien le HTML courant et bien formé. Avant de vous fier au résultat sur du balisage plus inhabituel, trois points précis méritent une vérification :

• Quelques éléments HTML5 auto-fermants ne sont pas reconnus comme tels. La liste des balises qui n'ont pas besoin de balise de fermeture utilisée par cet outil, comparée à la liste des éléments vides de la spécification HTML actuelle, omet quelques-uns des plus récents — en particulier <source> (employé dans <video>, <audio> et <picture>), <track> (employé dans <video> pour les sous-titres) et <col> (employé dans <colgroup> dans les tableaux). Si votre HTML emploie l'une de ces balises écrite de la manière habituelle — c'est-à-dire sans /> final explicite — tout ce qui suit cette balise peut se retrouver indenté d'un niveau de trop, puisque l'outil attend encore une balise de fermeture qui ne viendra jamais. Les écrire avec la barre oblique de fermeture explicite (<source />) évite le problème.
• Il ne répare pas un HTML cassé. Si une balise de votre code d'origine n'est jamais fermée, ou si les balises ne se correspondent pas, cet outil remet en forme la structure qu'il trouve sans planter, mais il n'insère pas la balise de fermeture manquante et ne corrige pas davantage le problème de fond. Il manquera toujours au résultat ce qui manquait à l'entrée : c'est un outil de mise en forme, pas un validateur.
• Les balises en ligne au milieu d'une phrase peuvent se retrouver sur leur propre ligne. Des balises comme <strong>, <em> ou <a> apparaissant dans un paragraphe de texte courant peuvent finir sur des lignes séparées des mots qui les entourent, car cet outil ne les traite pas comme « à garder en ligne », contrairement à certains autres. Cela ne change pas la façon dont le navigateur affiche le HTML — l'espace entre les balises est réduit dans les deux cas — mais il faut s'y attendre si vous mettez en forme un contenu très rédigé, riche en balises de style en ligne.

Rien de tout cela ne change ce que le HTML fait réellement quand un navigateur l'affiche — il s'agit uniquement de l'allure du code pour qui le lit directement, pas de l'affichage de la page.

Quand c'est le bon outil

• Lire le HTML d'une page en ligne pour en tirer des enseignements. Afficher le source d'un site ou l'inspecter avec les outils de développement du navigateur révèle souvent un balisage comprimé ou généré automatiquement, peu structuré : le formater permet d'étudier réellement la construction d'une page, un usage de culture numérique qui dépasse la mise en forme de son propre code.
• Corriger le devoir de HTML d'un élève. Le code collé d'un éditeur à un autre ou exporté depuis un constructeur de pages perd parfois sa mise en forme d'origine ; le formater avant de le lire accélère la correction et le retour.
• Chercher pourquoi un balisage ne s'affiche pas correctement. Un HTML dense et non mis en forme est plus difficile à parcourir pour y repérer une balise manquante ou mal placée — le mettre en forme d'abord rend en général le problème structurel plus facile à voir, sachant que cet outil ne réparera pas pour vous une balise réellement cassée.

Si votre HTML emploie beaucoup de balises <source>, <track> ou <col> sans barre oblique de fermeture explicite, revérifiez l'indentation après ces balises dans le résultat — voir la limite décrite ci-dessus. Pour le balisage d'une page courante, cet outil est un moyen rapide d'obtenir une structure lisible sans installer d'éditeur ni d'extension.

Exemple

On demande à un élève d'examiner la page d'accueil d'un vrai site et de décrire comment sa navigation principale est structurée dans le HTML. Le source de la page affiche une seule ligne dense et minifiée, sans le moindre espacement. La coller dans cet outil et la formater la transforme en balisage correctement indenté, ce qui permet de voir réellement quels éléments <nav>, <ul> et <li> sont imbriqués dans quels autres, et comment la navigation s'articule au reste de la page — le genre de lecture structurelle bien plus difficile à mener sur une ligne unique non mise en forme.

Questions fréquentes

La mise en forme change-t-elle l'affichage du HTML ?

Non. Seuls l'espacement et les retours à la ligne changent — les balises, les attributs et le contenu restent les mêmes, la page s'affiche donc à l'identique dans un navigateur.

Les commentaires HTML sont-ils supprimés ?

Non — les commentaires, y compris les commentaires conditionnels, sont conservés tels quels dans le résultat.

Le CSS ou le JavaScript contenu dans mon HTML sera-t-il mis en forme aussi ?

Pas pour lui-même. Les blocs <script> et <style> sont repositionnés pour suivre l'indentation du HTML environnant, mais le code qu'ils contiennent n'est pas remis en forme de son côté. Utilisez JavaScript Beautifier ou CSS Beautifier directement sur ce contenu s'il a besoin de sa propre mise en forme.

Répare-t-il les balises cassées ou non fermées ?

Non. Cet outil met en forme la structure qu'il trouve ; il ne valide pas le HTML et n'ajoute pas les balises de fermeture manquantes.

Gère-t-il correctement les balises <source>, <track> et <col> ?

Pas de façon fiable lorsqu'elles sont écrites sans barre oblique de fermeture explicite : le contenu qui les suit peut se retrouver indenté d'un niveau de trop. Les écrire sous la forme <source /> évite ce problème. Voir « Ce qu'il faut savoir avant de l'utiliser » ci-dessus.

Mon code est-il enregistré quelque part ?

Non. Le HTML collé est traité pour produire le résultat mis en forme et n'est pas conservé ensuite ; seul l'usage de l'outil est enregistré, pas le code lui-même.

Quels outils liés puis-je utiliser ?

Utilisez JavaScript Beautifier ou CSS Beautifier pour mettre en forme le JavaScript ou le CSS contenu dans votre HTML, ou HTML Minifier pour recomprimer un HTML terminé en vue de la mise en production.