Mode d’emploi

Collez du HTML dans la zone de saisie, ouvrez un fichier .html ou essayez l’exemple.
Choisissez Embellir pour un balisage indenté et lisible, ou Minifier pour une sortie compacte.
Lors de l’embellissement, choisissez 2 espaces, 4 espaces ou des tabulations, et décidez si les commentaires sont conservés.
Copiez le résultat ou téléchargez-le sous forme de fichier .html.

Fonctionnement

Le formateur lit le HTML avec un analyseur lexical tolérant, un peu comme le fait un navigateur, puis le réécrit. Il ne rend jamais l'entrée, de sorte que les scripts du code collé ne peuvent pas s'exécuter et que rien n'est chargé depuis le web.

La fonction Beautify place chaque élément de bloc (div, p, ul, li, section, table, …) sur sa propre ligne, indenté selon son niveau d'imbrication. Le texte et les éléments en ligne tels que a, b, em, span, code, img et br restent ensemble sur une seule ligne, de sorte que les espaces entre les mots et les liens ne sont pas modifiés d'une manière qui altère le rendu de la page. Les séries d'espaces et de sauts de ligne dans le texte deviennent un espace unique, comme le font de toute façon les navigateurs.

Le contenu des éléments pre, textarea, script et style est copié exactement tel qu'il est écrit, y compris les espaces et les caractères < ou >. Les éléments vides comme br, img, input, meta et link ne reçoivent jamais de balise fermante. Les balises auto-fermantes comme <path /> dans le SVG en ligne sont conservées auto-fermantes.

La fonction Minify réduit les espaces dans le texte à des espaces simples, supprime les espaces à côté des éléments de bloc, normalise les espaces entre les attributs et, si « Conserver les commentaires » est désactivé, supprime les commentaires. Les commentaires conditionnels sont toujours conservés.

L'outil ne corrige pas le HTML invalide, n'ajoute pas de balises manquantes, ne réordonne pas les attributs et ne minifie pas le CSS et le JavaScript contenus dans les éléments style et script. Les éléments laissés ouverts sont fermés à la fin de leur parent, et une balise fermante sans balise ouvrante correspondante est conservée telle qu'écrite.

Exemples

Lire du code généré

Un CMS génère un modèle sur une seule longue ligne. La fonction Beautify avec 2 espaces affiche la navigation, les éléments de liste et le contenu principal sous forme d'arborescence indentée, tandis que « Les prix incluent la <strong>TVA</strong>. » reste sur une seule ligne lisible.

Préparer un modèle d'e-mail

Minifiez un e-mail HTML avec les commentaires désactivés pour réduire sa taille. Un bloc <pre> avec un tableau de prix et le <style> en ligne sont laissés exactement tels qu'ils étaient.

Vérifier la structure

Lorsqu'une balise fermante </div> est manquante, la sortie mise en forme montre les éléments suivants indentés d'un niveau de trop, ce qui permet de voir facilement où l'élément aurait dû se terminer.

Foire aux questions

Est-ce que la mise en forme va modifier l’apparence de ma page ?

Dans presque tous les cas, non. Les espaces dans les éléments de bloc sont réduits et transformés en sauts de ligne, que les navigateurs ignorent. Le texte et les éléments en ligne restent sur la même ligne, et pre, textarea, script et style ne sont pas modifiés. L’exception concerne les pages qui utilisent CSS white-space: pre sur des éléments ordinaires.

Minifie-t-il le CSS et le JavaScript présents dans la page ?

Non. Le contenu des balises script et style est conservé exactement tel qu’écrit, il ne peut donc pas être cassé. Utilisez le formateur CSS pour minifier une feuille de style séparément.

Est-il sûr de coller du HTML provenant d’une source inconnue ?

Oui. La saisie est traitée uniquement comme du texte et n’est jamais insérée dans la page ; ses scripts ne sont donc pas exécutés et ses images ou liens ne sont pas chargés.

Valide-t-il mon HTML ?

Non. Il est volontairement tolérant et met en forme le balisage incorrect au lieu de le rejeter. Les balises fermantes mal appariées sont conservées, l’indentation vous aide donc à les repérer, mais aucune liste d’erreurs n’est produite.

Confidentialité

Votre HTML est traité uniquement dans votre navigateur et n’est jamais rendu ni téléversé. Rien n’est stocké ni inclus dans les analyses.