Aller au contenu
Outil gratuit

Formateur HTML en ligne : embellir le code HTML et CSS

Le formateur HTML, aussi appelé HTML Beautifier, transforme du HTML et du CSS minifiés ou désordonnés en code indenté et lisible : la ligne body{margin:0;font-family:Arial,sans-serif}… devient par exemple des règles CSS bien indentées, avec au choix 2 ou 4 espaces, ou une tabulation. Le langage est détecté automatiquement. Gratuit, sans inscription : ton code reste dans ton navigateur.

Créé par Luca Stanek

Ton code est prêt ? Mets ton site en ligne avec un hébergement web rapide et fiable.

Mets ton site en ligne

Code formaté

Le code formaté apparaîtra ici dès que tu colleras quelque chose à gauche.

Colle ton code à gauche ou charge un exemple. Le résultat apparaît aussitôt.

Ton code reste dans ton navigateur : il n’est ni envoyé ni enregistré.

Exemple de résultat

Ce que ce formateur HTML et CSS fait de ton code

Du code tel qu’il sort d’un minificateur ou d’un éditeur, et le résultat avec une indentation de 2 espaces.

HTML

Saisie :

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Résultat :

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Saisie :

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Résultat :

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Vue d’ensemble

Qu’est-ce qu’un formateur HTML ?

Un formateur HTML, aussi appelé embellisseur HTML, rend le code HTML et CSS lisible : une structure par ligne, avec une indentation uniforme. Il détecte automatiquement le langage, utilise 2 ou 4 espaces ou une tabulation pour l’indentation, ouvre les fichiers jusqu’à 2 MB et ne modifie que les espaces et les sauts de ligne, sauf si un point-virgule final manque en CSS. Il fonctionne gratuitement dans ton navigateur, sans téléversement.

Formater du HTML

Les éléments de bloc occupent chacun leur propre ligne et sont indentés ; le texte courant passe à la ligne après 100 caractères. Si tu le souhaites, les longues balises affichent un attribut par ligne.

Formater et embellir le CSS

Les sélecteurs, déclarations et accolades sont placés sur des lignes distinctes, y compris dans @media. Les longues listes de valeurs, comme transition, sont réparties sur plusieurs lignes.

Langue détectée automatiquement

Les balises évoquent le HTML ; les accolades, les règles @ ou les propriétés suivies de deux-points évoquent le CSS. Tu peux aussi choisir manuellement HTML ou CSS.

Avertissements avec ligne et colonne

L’outil signale les balises et les accolades non fermées avec la ligne et la colonne ; un clic met en évidence l’emplacement dans la saisie. Ce n’est pas un validateur.

Résultat avec coloration syntaxique

Tu vois aussi le nombre de lignes, ainsi que le nombre d’éléments ou de règles et de déclarations. Au-delà de 150.000 caractères, les résultats s’affichent sans couleurs.

Dans le navigateur, sans téléversement

Ton code n’est ni téléversé ni enregistré. Tu peux ouvrir des fichiers jusqu’à 2 MB, puis copier ou télécharger le résultat.

Comment ça fonctionne

Comment formater du HTML et du CSS en ligne

Cinq étapes, sans inscription ni installation.

Étape 1

Coller le code

Colle du HTML ou du CSS dans le champ de gauche, ouvre un fichier (.html, .htm, .xhtml, .css ou .txt, jusqu’à 2 MB) ou charge l’exemple HTML ou CSS.

Étape 2

Vérifier la langue

Laisse la langue sur Automatique ou sélectionne HTML ou CSS. La langue détectée s’affiche sous le résultat.

Étape 3

Choisir l’indentation

Choisis une indentation de 2 espaces, 4 espaces ou une tabulation. Pour le HTML, indique si les attributs des longues balises doivent passer à la ligne ou rester sur une seule ligne.

Étape 4

Vérifier les indications

Les avertissements et les erreurs indiquent la ligne et la colonne. Clique sur le lien à côté pour mettre en évidence l’emplacement dans ta saisie.

Étape 5

Appliquer le résultat

Copie le code formaté ou télécharge-le sous formatted.html ou formatted.css.

Règles

Comment fonctionne le formateur HTML et CSS

Éléments de bloc

div, ul, table et autres éléments sont placés sur des lignes distinctes, avec une indentation du contenu. Les éléments courts, comme un paragraphe, restent sur une seule ligne.

Texte courant

Les espaces multiples sont réduits à un seul, et les longs paragraphes sont coupés à 100 caractères. L’espace entre les balises en ligne est conservé.

Balises longues

Si une balise ne tient pas sur une ligne, chaque attribut passe sur sa propre ligne. Cette option peut être désactivée.

Inchangé

Le contenu de pre et textarea, les commentaires, les valeurs des attributs et les textes restent inchangés. style est formaté comme du CSS ; script est tout au plus réindenté.

CSS : les sélecteurs, déclarations et accolades sont sur des lignes distinctes ; un point-virgule final manquant est ajouté. Limites : le code n’est pas validé, le JavaScript n’est pas reformaté, et SCSS et Less ne sont pas pris en charge.

Découvrir plus

Autres outils

Comparer des textes en ligne (Diff Checker)

Compare en ligne deux textes, fichiers de configuration ou versions de code, repère les différences ligne par ligne et mot par mot, puis copie-les au format Unified Diff. Tout fonctionne dans ton navigateur.

Créé par Dimitri Heissler

Formateur JSON

Formate, minifie et valide du JSON avec coloration syntaxique, affichage des erreurs et téléchargement, entièrement dans ton navigateur.

Créé par Jakub Martyniak

Formateur et validateur XML

Valide, formate, minifie et répare automatiquement le XML (caractères non échappés, balises manquantes, déclaration manquante) : 100 % dans le navigateur, sans importation.

Créé par Justin Schuessler

Testeur de regex

Teste des expressions régulières en direct avec le moteur JavaScript natif : surlignage des correspondances, groupes de capture et mode remplacement, entièrement dans le navigateur.

Créé par Jakub Martyniak

Encodeur et décodeur d’URL

Encode et décode des URL et du texte en ligne : comparaison de encodeURIComponent, encodeURI et du format des formulaires, avec tableau des paramètres de requête et générateur de liens UTM. Fonctionne entièrement dans le navigateur.

Créé par Dimitri Heissler

Générateur .htaccess et générateur htpasswd

Crée des fichiers Apache .htaccess et .htpasswd en ligne : redirections 301, HTTPS, protection par mot de passe avec bcrypt, règles WordPress, pages d’erreur, mise en cache, GZIP et protection contre le hotlinking. Fonctionne entièrement dans le navigateur.

Créé par Dimitri Heissler

Éditeur Markdown

Rédige du Markdown en ligne avec aperçu en direct : README pour GitHub et messages Discord, tableaux depuis Excel, export en PDF ou HTML. Entièrement dans le navigateur.

Créé par Dimitri Heissler

Formateur SQL en ligne (formater et embellir du SQL)

Formate, embellis et minifie du SQL en ligne pour MySQL, MariaDB et PostgreSQL, avec indentation et choix de la casse des mots-clés. Tout se fait dans le navigateur, sans transfert de données.

Créé par Luca Stanek

Sélecteur de couleurs

Convertis les couleurs en temps réel entre HEX, RGB, HSL, HSV et CMYK, trouve la couleur CSS nommée la plus proche et vérifie le contraste WCAG avec le noir et le blanc, le tout dans ton navigateur.

Créé par Justin Schuessler

FAQ

Questions fréquentes

Réponses courtes sur le formatage HTML et CSS avec cet outil.

Un formateur HTML, aussi appelé embellisseur, rend le code lisible : une structure par ligne, avec une indentation uniforme. Pratique pour le code minifié, le code source provenant d’un navigateur ou le code issu d’un éditeur sans fonction de formatage. Ce formateur traite le HTML et le CSS.

Colle le code à gauche : le résultat apparaît aussitôt à droite. Choisis une indentation de 2 espaces, 4 espaces ou une tabulation, puis indique si les attributs des longues balises doivent passer à la ligne. Copie ensuite le résultat ou télécharge-le sous le nom formatted.html.

Colle ton CSS : l’outil le reconnaît grâce aux accolades, aux règles @ ou aux propriétés suivies de deux-points, mais tu peux aussi sélectionner CSS manuellement. Chaque règle place le sélecteur, les déclarations et les accolades sur leurs propres lignes, y compris dans @media. Les longues listes de valeurs comme transition sont réparties sur plusieurs lignes, et un dernier point-virgule manquant est ajouté. Le fichier téléchargé s’appelle formatted.css.

Non. Seuls les espaces et les sauts de ligne changent. Les balises, attributs, valeurs, textes et commentaires restent inchangés. Seule exception : en CSS, un point-virgule manquant est ajouté après la dernière déclaration.

Le formateur modifie uniquement les espaces, l’indentation et les sauts de ligne du code source pour le rendre plus lisible. En HTML, tu mets le texte en forme avec des balises comme strong, em ou br. L’outil n’ajoute ni ne modifie ces balises.

Le contenu de pre et textarea reste inchangé, car chaque espace y compte. Le CSS dans style est formaté ; script est tout au plus réindenté, sans autre modification de format.

Non, il ne valide ni ne minifie le code. Il se contente de formater le HTML et le CSS : le JavaScript dans script n’est pas reformaté, et SCSS et Less ne sont pas pris en charge. Il signale toutefois les balises non fermées, les balises fermantes sans balise ouvrante et les accolades sans correspondance, avec la ligne et la colonne. Si un commentaire, un texte entre guillemets ou une balise n’est pas terminé, un message d’erreur s’affiche à la place du résultat.

Non. Tout se passe dans ton navigateur, sans envoi ni stockage. Tu peux ouvrir des fichiers de 2 MB maximum : .html, .htm, .xhtml, .css ou .txt.

D’autres questions ?

Contacter le support
Tu crées un site web ?

Ton site a besoin d’un hébergement fiable

Un VPS ZAP-Hosting met ton site en ligne de manière fiable.

4,4/5 Trustpilot32 000+ Serveurs actifsDepuis 2010
Voir l’hébergement

Sans configuration. Sans risque. En ligne en quelques secondes.

Durée flexibleRésiliable à tout momentEn ligne en 60 secondes

Tu cherches d’autres outils ? Voir tous les outils de développement