Formateur HTML
Indenté pour le lire, ou compressé pour le livrer.
Les exemples remplacent temporairement la saisie et les réglages. Vous pouvez rétablir votre travail précédent.
Collez ou saisissez du texte ci-dessus pour voir le résultat ici.
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.
Exemple
Les horaires d’une boulangerie avec un bloc style : mise en forme à la tabulation
Le site de la boulangerie Au Pain Doré affiche ses horaires dans un bloc HTML de 283 caractères sur deux lignes : un bloc style de deux règles, un titre et un tableau de trois lignes, dont « fermé » le lundi en rouge. Pour corriger l’heure du dimanche, on le colle avec « Mettre en forme » et la tabulation.
- Résultat : 35 lignes. Chaque ligne du tableau (tr) a la sienne, chaque cellule (td) un cran plus bas, et l’horaire encore un cran en dessous.
- Les deux règles CSS passent sous la balise style, chacune sur sa ligne et telles qu’elles ont été tapées : padding:4px 8px n’est pas réécrit. Pour les aérer, il faut le Formateur CSS.
- « 7 h 00 – 13 h 00 » reste intact, espaces et tiret compris, sur sa propre ligne sous « Dimanche ».
- « Compresser » sur le bloc d’origine rend les mêmes 283 caractères : 0 % de gain, car il n’y a ni commentaire ni blanc entre les blocs, et le CSS du bloc style n’est pas compressé.
| Que faire | Lignes | Caractères |
|---|---|---|
| Bloc d’origine | 2 | 283 |
| Mettre en forme, tabulation | 35 | 400 |
| Mettre en forme, 2 espaces | 35 | 484 |
| Compresser le bloc d’origine | 2 | 283 (0 %) |
| Compresser la version tabulée | 2 | 285 (29 % de moins) |
L’horaire du dimanche se trouve d’un coup d’œil. Après correction, « Compresser » retire l’indentation ajoutée autour des balises, mais garde le saut de ligne et les tabulations placés entre les deux règles CSS : 285 caractères au lieu de 283.
Comment ça marche
- Collez le HTML. Il est mis en forme au fil de la frappe.
- Passez à « compresser » pour retirer l’indentation et les commentaires.
- Choisissez deux espaces, quatre, ou une tabulation.
- Copiez le résultat, ou téléchargez-le en fichier.
Questions fréquentes
- Que se passe-t-il avec un document pas tout à fait valide ?
- Il est formaté quand même. Le balisage est lu comme une suite de balises et de texte plutôt qu’analysé en arbre, parce que le HTML qu’on veut formater est le plus souvent celui qu’on essaie de comprendre.
- Va-t-il casser les espaces dans mon texte ?
- Non, et c’est la partie délicate du travail. L’espace entre <b>un</b> et <i>deux</i> est rendue, donc elle est gardée ; l’espace de part et d’autre d’un <div> ne l’est pas, donc elle disparaît. Les éléments en ligne restent sur la ligne avec les mots qui les entourent.
- Touche-t-il à quelque chose dans <pre> ?
- Pas un caractère. Chaque espace dans <pre> et <textarea> est rendue, donc le contenu ressort exactement tel qu’il a été tapé — pas même décalé vers la gauche.
- La compression renomme-t-elle quelque chose ?
- Non. Elle retire les commentaires et les blancs qui ne se voient pas. Rien n’est renommé ni réordonné, et le document qui sort s’affiche comme celui qui est entré.
- Le CSS et le JavaScript des balises <style> et <script> sont-ils compressés aussi ?
- Non. Seuls les blancs au début et à la fin du code partent ; les espaces et sauts de ligne à l’intérieur restent tels qu’ils ont été tapés, si bien qu’un bloc <style> écrit sur deux lignes ressort sur deux lignes. Pour réduire le code lui-même, passez-le d’abord dans le Formateur CSS ou le Minifieur JavaScript.
- Quelque chose part-il vers un serveur ?
- Non. Tout tourne dans le navigateur : ce que vous collez reste sur votre ordinateur.