TanodTools
FR

Formater et indenter du HTML

Collez du HTML désordonné ou minifié et récupérez-le indenté, scripts et styles intégrés compris.

Fonctionne entièrement dans votre navigateur

Indentation
Contenu

Données jusqu'à environ 10 Mo. L'outil réindente le balisage et ne le rejette jamais : il ne vous dit donc pas si le HTML est invalide.

Comment formater du HTML

  1. Collez votre HTML dans le champ, ou cliquez sur Insérer un exemple.
  2. Choisissez l'indentation, une longueur de ligne maximale si vous le souhaitez, et si les <script> et <style> intégrés doivent être formatés.
  3. La version propre apparaît en dessous pendant la saisie. Copiez-la ou téléchargez-la en fichier .html.

Indenter du HTML sans risque

Les navigateurs réduisent la plupart des espaces en HTML : une page peut être écrite sur une seule ligne ou sur mille et s'afficher de la même façon. Les modèles, les sorties de CMS et les fichiers minifiés produisent souvent un balisage illisible. Formater le HTML place les éléments de bloc sur leurs propres lignes et indente les enfants sous leurs parents, ce qui rend faciles à repérer les balises mal appariées ou mal placées.

C'est dans les détails que les formateurs se trompent. Les éléments vides comme <br>, <img> et <input> n'ont jamais de balise fermante : ils ne doivent donc pas augmenter l'indentation. Les espaces à l'intérieur de <pre> et <textarea> s'affichent tels quels : on ne peut donc pas y toucher. Et les éléments en ligne partagent une ligne avec les mots qui les entourent, car un saut de ligne à cet endroit ajouterait une espace visible.

Les scripts et feuilles de style intégrés à la page sont un autre langage. Le formateur peut les mettre en forme avec l'indentation de la page, ou les laisser tels quels si vous préférez garder un diff réduit ou si le code est volontairement minifié.

Conseils

  • Vous voulez plutôt alléger la feuille de style ? Minifier et indenter du CSS fonctionne sur du CSS seul.
  • Vous convertissez un extrait en Markdown pour un README ? Utilisez HTML en Markdown.
  • Vous relisez une modification de modèle ? Formatez l'ancienne et la nouvelle version, puis passez-les dans Comparer deux textes.

Questions fréquentes

Mon HTML est-il envoyé en ligne ?

Non. La bibliothèque de formatage est chargée depuis ce site la première fois que vous collez quelque chose, et le balisage est traité uniquement dans votre navigateur.

Le formatage change-t-il l'apparence de la page ?

Il modifie les espaces entre les balises, que les navigateurs réduisent en grande partie : la page devrait donc avoir le même aspect. L'exception concerne les espaces visibles : le texte à l'intérieur de <pre> et <textarea> est laissé exactement tel quel pour cette raison.

Me dira-t-il si mon HTML est cassé ?

Non. Il formate avec tolérance et ne rejette rien : une balise non fermée ne provoque donc pas d'erreur, l'indentation suit simplement ce qu'il trouve. Pour trouver les erreurs de structure, passez la page dans un validateur.

Et le JavaScript et le CSS de la page ?

Par défaut, le contenu de <script> et <style> est formaté avec la même indentation. Décochez Formater les scripts et styles intégrés pour les laisser exactement tels qu'écrits.

Comment sont traitées les balises en ligne comme span et a ?

Les éléments en ligne restent sur la même ligne que leur texte quand ils y tiennent : une phrase contenant <strong> n'est donc pas coupée en plusieurs lignes, ce qui ajouterait des espaces visibles.

À quoi sert Couper les longues lignes ?

Avec une longueur définie, le texte qui dépasse la limite passe à la ligne à la fin d'un mot. Désactivé, chaque passage de texte reste sur une seule ligne, quelle que soit sa longueur.