Aller au contenu principal

Formateur et minificateur HTML

Formatez du HTML ou retirez ses commentaires ordinaires localement, en conservant les espaces du texte et le contenu des scripts.

  • Presse-papiers
  • Export
Automatiser

Intégrer ce widget

Personnalisez le rendu, vérifiez l’aperçu puis copiez le code.

Aperçu

Type de code d’intégration

Code à copier

Responsive et redimensionné automatiquement par Bethemesh.

Cet outil vous a-t-il été utile ?

Comment fonctionne cet outil ?

Réorganisez un document ou un fragment HTML pour relire sa structure, sans ouvrir le code comme une page active. Le formateur distingue les balises, attributs et textes au lieu de couper l’extrait à chaque chevron. Une seconde action retire les commentaires ordinaires avec une approche volontairement conservatrice. Le contenu des scripts n’est pas exécuté, les liens et images ne sont pas chargés et aucune requête de formatage n’envoie votre page à un service externe.

Le formatage s’appuie sur une analyse HTML et applique une présentation structurée. Il tient compte des espaces significatifs entre éléments en utilisant une sensibilité stricte à ces espaces. La présentation peut changer sans imposer mécaniquement une nouvelle ligne entre toutes les balises : séparer deux éléments en ligne peut modifier les espaces visibles dans le navigateur.

Le contenu intégré dans script et style n’est pas reformatté par une seconde transformation JavaScript ou CSS. Utilisez leurs formateurs dédiés si vous voulez travailler sur ces langages. Les attributs et leur disposition peuvent être normalisés par le formateur ; le résultat n’est pas une reproduction exacte de l’écriture source.

L’action de retrait des commentaires ne compresse pas globalement les espaces. Elle supprime uniquement les plages des commentaires ordinaires reconnues par le parseur. Les autres caractères, y compris les espaces des textes, pre et scripts, restent inchangés. Les commentaires marqués !, les directives commençant par # et les commentaires conditionnels reconnus sont conservés.

Cette conservation réduit le risque d’abîmer un texte mais ne couvre pas toutes les conventions applicatives. Un framework peut utiliser un commentaire apparemment ordinaire comme marqueur d’hydratation. Gardez ces sorties dans leur chaîne de compilation et vérifiez leurs règles avant de supprimer des commentaires. Une mise en page réussie n’est pas non plus une validation complète d’accessibilité, de référencement ou de comportement.

Comment utiliser cet outil ?

  1. Ajouter du HTML brut

    Collez un fragment ou importez un fichier .html. Écartez les clôtures Markdown et le code de template que le parseur HTML ne sait pas interpréter.

  2. Choisir l’action adaptée

    Formatez pour la relecture ou retirez les commentaires ordinaires. La seconde action n’est pas un minificateur complet de page, scripts et styles inclus.

  3. Vérifier puis récupérer le code

    Examinez textes en ligne, attributs et marqueurs avant de copier ou télécharger. Modifier la source masque l’ancienne sortie ; réinitialiser efface les deux zones.

Cas d'utilisation

Relire un composant HTML isolé

Présentez sa structure pour retrouver les conteneurs et attributs. Le formulaire ne résout pas les composants ou expressions spécifiques d’un fichier Astro, JSX ou d’un autre langage de template.

Partager un exemple de balisage

Copiez un extrait lisible dans une documentation technique. Les éléments restent du texte dans cet outil ; il ne produit pas une capture du rendu final.

Retirer des commentaires explicatifs

Supprimez des commentaires ordinaires d’un fragment statique sans écraser les espaces des paragraphes ou blocs préformatés. Le gain peut être nul si aucun commentaire n’est présent.

Exemples

Conserver un fragment en ligne

Le fragment simple peut rester sur une seule ligne, avec une terminaison de ligne normalisée. Le formateur ne force pas un découpage qui pourrait ajouter des espaces visibles.

Entrée

<div><span>x</span></div>

Résultat

<div><span>x</span></div>

Retirer un commentaire sans toucher aux espaces

Seul le commentaire note disparaît. Le paragraphe garde ses espaces autour de b et le bloc pre conserve son espacement et son retour à la ligne.

Entrée

<!-- note --><p>a <b>b</b> c</p><pre> x  y
 z</pre>

Résultat

<p>a <b>b</b> c</p><pre> x  y
 z</pre>

Conseils et bonnes pratiques

  • Testez le résultat dans la page réelle si les espaces entre éléments en ligne influencent votre mise en page.
  • Utilisez le formateur XML pour un document XML strict ; HTML et XML n’appliquent pas les mêmes règles de balises.
  • La suppression des commentaires ne supprime ni les règles CSS inutilisées ni le JavaScript mort.
  • Conservez une source de travail commentée si ces annotations servent à maintenir le projet.

Sources et références

Questions fréquentes

Pourquoi certaines balises restent-elles sur une ligne ?

Une séparation entre éléments en ligne peut créer un espace visible. Le formateur tient compte de ce contexte et ne transforme pas systématiquement chaque balise en nouvelle ligne.

Le retrait des commentaires est-il une minification complète ?

Non. Cette action conserve volontairement le reste du texte, notamment les espaces significatifs et les scripts. Sans commentaires ordinaires, la sortie peut être identique à l’entrée.

Mes scripts et styles intégrés sont-ils exécutés ou reformattés ?

Ils ne sont pas exécutés et la mise en page HTML n’applique pas de formatage de langage intégré. Utilisez les outils JavaScript et CSS pour transformer explicitement ces extraits.

Puis-je supprimer les commentaires d’une page générée par un framework ?

Pas sans vérifier ses conventions. Des commentaires peuvent porter des marqueurs utilisés par son runtime. Une action adaptée à du HTML statique ne remplace pas la compilation du framework.

Outils associés

Des outils similaires ou complémentaires à celui-ci.

Outils similaires

Formatez du JavaScript, TypeScript ou JSX pour en faciliter la lecture, sans exécuter le code. Traitement local dans le navigateur.

DéveloppementUtiliser l’outil

Formatez, minifiez et validez un document XML directement dans votre navigateur.

DéveloppementUtiliser l’outil