Aller au contenu principal
Balisage

Formateur HTML avec aperçu

Indentez le HTML sur 2, 4 ou 8 espaces, réduisez-le avec Minify et affichez l'entrée originale dans un aperçu sandbox assaini par DOMPurify. Idéal pour nettoyer du HTML généré, déboguer des templates ou préparer du contenu pour emails et CMS. Aperçu sécurisé inclus.

Formateurs web

En bref

Rendez le HTML lisible en sachant que le formatage est heuristique, que la minification peut changer les espaces et que seul l’aperçu—pas la source copiée—est assaini.

Fonctionnalités prises en charge

  • Texte saisi, collé, exemple ou fichier .html/.htm ; aucun DOM n’est analysé et la conformité n’est pas validée.
  • Des remplacements par expressions régulières séparent les balises et indentent ; choix 2/4/8 espaces, tandis que Minify réduit les espaces et intervalles entre balises.
  • La source se copie ou se télécharge en formatted.html. L’aperçu assainit l’entrée originale par DOMPurify puis l’insère dans un iframe sandbox avec CSP restrictive.
  • Formatez le CSS incorporé avec CSS Formatter puis contrôlez les fragments non fiables via une visionneuse HTML assainie.
  • Non. DOMPurify et les restrictions iframe ne concernent que l’Aperçu ; la sortie peut garder scripts, handlers, liens ou autre markup actif.

Comment utiliser Formateur HTML avec aperçu

Réalisez un flux Formateur HTML avec aperçu vérifiable dans ce navigateur.

  1. 1

    Étape 1

    Fournir l’entrée exacte

    Texte saisi, collé, exemple ou fichier .html/.htm ; aucun DOM n’est analysé et la conformité n’est pas validée.

  2. 2

    Étape 2

    Régler les contrôles disponibles

    Format ou Minify, retrait 2/4/8, Live, Code ou Aperçu ; aucune réparation par parseur, validation ou politique d’assainissement réglable.

  3. 3

    Étape 3

    Exécuter l’opération

    Des remplacements par expressions régulières séparent les balises et indentent ; choix 2/4/8 espaces, tandis que Minify réduit les espaces et intervalles entre balises.

  4. 4

    Étape 4

    Vérifier le résultat

    Comparez dans un vrai parseur et testez pre, textarea, script, style et templates avant de remplacer la source.

  5. 5

    Étape 5

    Continuer ou exporter

    Formatez le CSS incorporé avec CSS Formatter puis contrôlez les fragments non fiables via une visionneuse HTML assainie.

Erreurs fréquentes

Tester scripts, formulaires ou widgets réseau dans l’aperçu isolé

Conséquence: L’assainissement et la CSP restrictive de l’iframe retirent volontairement le balisage actif et bloquent des capacités ; un comportement de production peut donc sembler cassé sans que la source le soit.

Correction: Réservez l’aperçu au rendu statique assaini et testez le comportement actif dans un environnement applicatif isolé et audité.

Publier la source copiée ou téléchargée parce que l’aperçu paraît sûr

Conséquence: DOMPurify et les restrictions iframe protègent uniquement le chemin Aperçu. La source formatée peut conserver scripts, gestionnaires d’événements, URL dangereuses et autre balisage actif.

Correction: Passez le HTML publiable dans le pipeline d’assainissement et de validation audité de l’application ; cet aperçu ne remplace aucune sécurité de build ou serveur.

Oublier ce cas limite : Pourquoi le HTML formaté ou minifié peut-il changer de comportement ?

Conséquence: L’algorithme utilise des regex, pas le tokenizer HTML ; espaces et coupures peuvent altérer contenu brut, préformaté, inline, mal formé ou templatisé.

Correction: Pour la production, utilisez un formateur fondé sur un parseur et gardez une fixture des nœuds sensibles aux espaces.

Bonnes pratiques

  • Comparez dans un vrai parseur et testez pre, textarea, script, style et templates avant de remplacer la source.
  • Pour la production, utilisez un formateur fondé sur un parseur et gardez une fixture des nœuds sensibles aux espaces.
  • Un bel aperçu ne prouve jamais que la source originale est sûre, valide, accessible ou identique en production.

Flux de travail liés

Formater la source sans confondre aperçu et assainissement

Formateur HTML avec aperçuFormateur CSSVisionneuse Markdown vers HTML

Formatez le CSS incorporé avec CSS Formatter puis contrôlez les fragments non fiables via une visionneuse HTML assainie.

  1. Conserver l’original et une fixture avec pre, textarea, script, style et template
  2. Formater pour relire puis comparer la structure analysée avec l’original
  3. Contrôler les espaces sensibles et le balisage mal formé dans un parseur conforme
  4. Utiliser l’aperçu pour le rendu statique assaini, pas le comportement actif
  5. Publier uniquement via le pipeline d’assainissement et de build audité de l’application

Limites du navigateur

  • L’algorithme utilise des regex, pas le tokenizer HTML ; espaces et coupures peuvent altérer contenu brut, préformaté, inline, mal formé ou templatisé.
  • Entrée, sortie, aperçu assaini et iframe peuvent coexister en mémoire ; un gros document peut figer l’onglet.
  • DOMPurify et sandbox varient selon le navigateur ; l’aperçu n’est volontairement pas une page réseau complète.

Ressources de référence

HTML Standard: SyntaxÉditeur: WHATWG · Révisé: 2026-07-26HTML Standard: iframe sandbox and srcdocÉditeur: WHATWG · Révisé: 2026-07-26DOMPurifyÉditeur: Cure53 · Révisé: 2026-07-26

Exemples concrets

Entrée
<div><span>Hi</span></div>
Résultat
<div> <span> Hi </span> </div>

Avec deux espaces, l’heuristique place balises et texte sur des lignes imbriquées ; validez les vrais documents.

Questions fréquentes

Le formateur analyse-t-il HTML ou réorganise-t-il seulement le texte source ?

Texte saisi, collé, exemple ou fichier .html/.htm ; aucun DOM n’est analysé et la conformité n’est pas validée.

Pourquoi le HTML formaté ou minifié peut-il changer de comportement ?

L’algorithme utilise des regex, pas le tokenizer HTML ; espaces et coupures peuvent altérer contenu brut, préformaté, inline, mal formé ou templatisé.

La source copiée ou téléchargée est-elle assainie et publiable ?

Non. DOMPurify et les restrictions iframe ne concernent que l’Aperçu ; la sortie peut garder scripts, handlers, liens ou autre markup actif.

Quels éléments exigent une comparaison fondée sur un vrai parseur ?

Comparez dans un vrai parseur et testez pre, textarea, script, style et templates avant de remplacer la source.

Le HTML importé ou le contenu de l’iframe est-il téléversé ?

Source, DOMPurify, srcdoc, copie et téléchargement restent dans le navigateur ; aucun HTML n’est envoyé et l’aperçu bloque scripts et attributs réseau.

Comment relire le CSS incorporé et les fragments non fiables ?

Formatez le CSS incorporé avec CSS Formatter puis contrôlez les fragments non fiables via une visionneuse HTML assainie.

Confidentialité et fonctionnement hors ligne

Source, DOMPurify, srcdoc, copie et téléchargement restent dans le navigateur ; aucun HTML n’est envoyé et l’aperçu bloque scripts et attributs réseau.

Outils associés