Formateur HTML
Indentez du HTML, y compris le JavaScript et le CSS contenus dans <script> et <style>, sans toucher à <pre> ni à <textarea>.
Entrée
Résultat
Le résultat apparaîtra ici.Les pages rendues côté serveur, les modèles d’e-mail et le HTML extrait par un scraper arrivent généralement sur une seule longue ligne. Cet outil réindente le balisage avec le formateur HTML de js-beautify et confie chaque bloc <script> et <style> en ligne à ses formateurs JavaScript et CSS, pour que le code intégré devienne lisible lui aussi. Les éléments sensibles aux espaces sont respectés : le contenu de <pre> et de <textarea> reste exactement tel quel, et les éléments en ligne comme <b> et <a> restent dans leur ligne de texte.
Comment ça marche
- Les longues lignes sont coupées à la colonne de votre choix ; mettez 0 pour ne jamais couper.
- Les attributs restent par défaut sur la ligne de la balise, ou passent un par ligne — alignés, ou avec le chevron fermant sur sa propre ligne.
- <head> et <body> sont par défaut au même niveau que <html>, la convention habituelle ; activez l’option d’indentation pour les imbriquer d’un niveau.
Où vont vos données
Nulle part. Cet outil s’exécute entièrement dans votre navigateur : le texte collé est traité par la page, jamais transmis à un serveur ni consigné dans un journal.
Cet outil est gratuit et ne demande aucun compte. Ses résultats n’existent que dans la page ouverte et ne sont enregistrés nulle part.
Ce que ça coûte
Cet outil est gratuit, sans connexion ni points.
Questions fréquentes
- Le formatage changera-t-il le rendu de ma page ?
- Dans presque tous les cas, non. Les espaces entre éléments de bloc n’affectent pas la mise en page, et les éléments en ligne sont gardés sur leur ligne pour qu’aucun espace n’apparaisse entre les mots. Le contenu de <pre> et de <textarea>, où les espaces sont visibles, n’est jamais modifié.
- Fonctionne-t-il sur des modèles JSX, Vue ou Handlebars ?
- js-beautify reconnaît les balises Handlebars {{ }} et de style Django {% %} assez bien pour les laisser intactes. JSX et les composants monofichiers Vue exigent un formateur qui les analyse réellement, comme Prettier, faute de quoi les expressions intégrées risquent d’être mal réespacées.
- Pourquoi la sortie a-t-elle encore une imbrication cassée ?
- Le formateur réindente ce qu’on lui donne et ne le répare pas. Un <div> non fermé est indenté comme s’il était encore ouvert, si bien que l’indentation de la sortie vous montre exactement où se trouve l’erreur. Passez par le validateur du W3C si vous avez besoin d’un verdict formel.
L’open source derrière
Cet outil fonctionne grâce à beautifier/js-beautify, publié sous licence MIT. Si vous avez besoin du même comportement dans votre propre programme, c’est cette bibliothèque qu’il faut utiliser.
beautifier/js-beautifyAussi appelé
- formateur html
- html beautifier
- formater html en ligne
- indenter html
- embellir html
- html pretty print