Formateur HTML
Indentez un document HTML sans changer son rendu, entièrement dans votre navigateur.
Fonctionne entièrement dans votre navigateur. Rien n'est envoyé, journalisé ni conservé.
Collez une page minifiée ou mal indentée et relisez-la correctement. Le formatage a lieu dans votre navigateur, et le document qui sort s'affiche exactement comme celui qui est entré.
Comment ça marche
Le document est lu dans un arbre — c'est là que sont traités les éléments vides, le contenu des balises script et style, et les balises fermantes que le HTML autorise à omettre — puis réécrit avec une nouvelle indentation.
L'emplacement des retours à la ligne est décidé par la façon dont un navigateur lit les espaces, et non par ce qui paraît propre. Toute suite d'espaces s'affiche comme une espace unique : transformer une espace en retour à la ligne suivi d'une indentation ne change donc rien. En créer une là où il n'y en avait pas, si : c'est ce qui sépare deux éléments en ligne jusque-là collés.
Les espaces ne sont donc ajoutées ou retirées qu'entre deux boîtes de type bloc et aux bords de l'une d'elles, là où un navigateur n'en affiche aucune. C'est l'exception qui permet de déplier une page minifiée, et c'est aussi pourquoi une suite d'éléments en ligne reste sur la ligne où elle était.
Une balise que le formateur ne connaît pas est traitée comme un élément en ligne, parce que c'est la réponse qui n'ajoute aucune espace et ne peut donc pas modifier la page.
Exemples
| Cas | Saisie | Résultat |
|---|---|---|
| Une liste sans indentation | <ul><li>One</li><li>Two</li></ul> | <ul> <li>One</li> <li>Two</li> </ul> |
Questions fréquentes
Ma page est-elle envoyée quelque part ?
Non. Le formateur est du JavaScript qui s'exécute dans cette page. Rien n'est téléversé, rien n'est journalisé et rien n'est stocké — vous pouvez couper votre connexion réseau, l'outil fonctionne toujours.
Pourquoi mes éléments en ligne sont-ils restés sur une seule ligne ?
Parce que les déplacer changerait votre page. Une suite d'espaces entre deux boîtes en ligne s'affiche comme une espace : mettre <span>a</span><span>b</span> sur deux lignes insère donc entre eux un écart qui n'existait pas. La plupart des formateurs le font quand même ; celui-ci non.
Va-t-il fermer mes balises ouvertes ?
Non. Il comprend qu'un second élément de liste ferme le premier, et indente donc votre liste correctement, mais il réécrit les balises que vous avez écrites. Ajouter une balise fermante reviendrait à modifier votre balisage plutôt qu'à le mettre en page, et l'endroit exact où elle devrait aller n'est pas toujours évident.
Valide-t-il le HTML ?
Non. Il n'a ni schéma, ni règles sur quel élément peut en contenir quel autre, ni avis sur vos attributs. Les seules choses qu'il refuse sont une balise, un commentaire ou un bloc script qui ne se referment jamais, parce qu'à partir de là il ne distingue plus le balisage du texte.
Qu'advient-il de mes scripts et de mes styles ?
Ils reviennent octet pour octet. Dans un script, un < est un signe inférieur et non le début d'une balise ; dans un <pre> ou un <textarea>, chaque espace est la vôtre. Ces quatre éléments sont laissés exactement tels quels. Si vous voulez formater le script ou la feuille de style elle-même, le formateur CSS est à côté.
Bon à savoir
- Le document qui sort s'affiche comme celui qui est entré. C'est vérifié par les tests sur un corpus plutôt que laissé à l'inspection.
- Rien n'est inventé : aucune balise fermante n'est ajoutée, aucun attribut n'est requoté, aucune entité n'est décodée et aucun nom de balise n'est recassé. Seule l'espacement entre les attributs change, parce qu'il n'est jamais affiché.
- La largeur de retour à la ligne décide si un élément au contenu en ligne reste sur une ligne ou se déplie : un paragraphe court se lit donc d'un trait, et un long est coupé à des espaces qu'il possédait déjà.