Formateur HTML
Mettez en forme, minifiez et vérifiez votre balisage
Ce formateur HTML range votre balisage comme un navigateur le lit, si bien qu’un élément de liste non fermé ou une cellule de tableau manquante est complété plutôt que refusé. De plus, il corrige l’indentation, met les attributs entre guillemets et ferme les balises laissées implicites, puis il note chaque changement sur sa propre ligne. Parce que tout le travail se fait dans cet onglet, rien de ce que vous collez n’est envoyé et rien ne s’exécute.
- GratuitPrix
- Mise en forme + minificationModes
- Sur sa ligneVérifications
- AucunEnvois
HTML Formatter
Beautify, minify and check HTML in your browser, with every issue on its line
- Éléments
- 0
- Profondeur
- 0
- Taille
- 0 B
Ready. Paste your HTML, open a file or try the sample.
| Résultat | Contrôle | Détails |
|---|
Ce que fait un formateur HTML
Un navigateur ne refuse jamais une page. Par conséquent, un paragraphe non fermé, un élément de liste sans balise de fin et une cellule de tableau laissée ouverte s’affichent quand même, car l’analyseur comble discrètement les trous à mesure qu’il lit. Ainsi le balisage derrière un site en ligne est souvent plus relâché que la source qu’une personne aimerait manipuler.
Ce formateur HTML existe précisément pour cet écart. En effet, il lit votre balisage avec les mêmes règles qu’un navigateur : il ferme les balises implicites, corrige l’indentation, aligne les attributs et vous rend un texte vraiment lisible.
En plus du rangement, il garde une note de chaque décision. Ainsi, une fin de liste implicite, un élément vide écrit avec une barre fermante ou une balise orpheline sans partenaire atterrissent chacun dans un tableau de vérifications, avec la ligne et la colonne où ils se trouvent.
Il ne construit aucune page et n’exécute aucun script, donc un bloc de balisage copié depuis le site d’un client est lu exactement comme le vôtre. De plus, un bloc <script> ou <style> est transporté tel quel, car son contenu n’est pas du HTML et le reformater le casserait.
Rien ne quitte cet onglet non plus. Ainsi un gabarit sous NDA, un composant à moitié fini ou une page que vous ne publieriez jamais se collent tous sans risque.
Comment un formateur HTML lit votre balisage
La première passe transforme le texte en jetons. Une balise ouvrante, une balise fermante, une suite de texte, un commentaire et le doctype sont des choses différentes ; ainsi le lecteur décide laquelle il regarde, un caractère à la fois.
La seconde passe range ensuite ces jetons dans un arbre, et c’est là que la forme est vérifiée. Le règlement ici est la spécification d’analyse HTML du WHATWG, le même document que suit chaque navigateur.
L’ordre explique l’essentiel de ce que dit le tableau des vérifications. Parce que certaines balises peuvent rester ouvertes à dessein, un nouveau <li> termine le précédent et une nouvelle ligne ferme la dernière cellule. Ainsi l’arbre que le lecteur construit est plus rangé que le texte que vous lui avez donné.
Trois sortes d’éléments reçoivent un traitement particulier. D’abord, un élément vide comme <br> ou <img> ne prend jamais de balise fermante. Ensuite, un élément à texte brut comme <script>, <style> ou <textarea> garde son contenu mot pour mot. Enfin, <pre> garde ses espaces, car dans ce seul élément l’espace est du contenu.
La casse est un choix plutôt qu’une règle. Par défaut, le formateur laisse vos noms de balises et d’attributs exactement tels quels, si bien qu’un <svg> en ligne garde viewBox et linearGradient écrits comme le SVG l’exige. Cependant, une seule option met tout en minuscules quand vous voulez le style HTML plus simple.
Pourquoi mettre en forme et minifier, c’est le même lecteur
Les deux modes lisent le balisage de la même façon et construisent le même arbre. Ensuite, un mode écrit cet arbre sur de nombreuses lignes indentées, et l’autre l’écrit en retirant les espaces entre les balises.
Ainsi la différence tient uniquement à la dernière étape. Parce que la minification réduit les suites d’espaces au lieu de les supprimer, un espace entre deux balises en ligne est conservé, car le retirer collerait deux mots sur la page.
Ce lecteur commun explique pourquoi les vérifications sont les mêmes dans les deux modes. En effet, une balise de fin manquante est ajoutée que vous mettiez en forme ou que vous minifiiez, et la note apparaît dans tous les cas.
Donc, mettez en forme quand vous voulez lire ou modifier le balisage, et minifiez quand vous voulez le publier. Pour une page que vous allez servir, le minificateur HTML dédié fait le même resserrement avec quelques options de plus.
Les vérifications qu’il effectue, et ce que signifie chaque note
La première note est une balise de fin implicite. Un <li>, un <p> ou une ligne de tableau peut se fermer tout seul ; le formateur ajoute donc la balise de fin et indique où, si bien que l’arbre devient explicite même quand votre source ne l’était pas.
La deuxième est un élément vide écrit avec une balise de fin. Un </br> ou une balise fermante sur un <img> ne veut rien dire, donc le lecteur la retire et note l’endroit plutôt que de laisser une paire trompeuse.
La troisième est une balise fermante sans partenaire. Quand une balise de fin ne correspond à rien dans la pile, le lecteur ne peut pas l’apparier, donc il signale la ligne au lieu de deviner quelle balise ouvrante vous vouliez.
La quatrième est un élément qui ne se ferme jamais. Si un <div> ou un <span> court jusqu’à la fin du fichier encore ouvert, la note nomme la balise qui l’a ouvert, car c’est celle que vous devez trouver.
La cinquième est un attribut en double. Deux valeurs class sur une même balise font qu’un navigateur garde la première et ignore la seconde, donc le lecteur pointe la paire avant qu’elle ne change discrètement votre mise en forme.
La sixième arrête tout, et c’est la seule à le faire. Un commentaire, un doctype ou un bloc <script> sans fin déborde du fichier, donc le lecteur ne peut pas terminer et rien ne s’affiche tant que vous ne le fermez pas.
Ce que ce formateur HTML ne fera pas
Il n’affichera pas votre page. Rien ici ne charge une image, n’exécute un script ni n’applique une feuille de style, donc le balisage ne peut pas agir sur l’onglet pendant que vous le lisez.
Il ne validera pas entièrement le balisage. Un formateur vérifie la forme, pas le règlement, donc un <div> imbriqué dans un <span> ou un niveau de titre qui saute de deux à quatre ressort bien indenté et pourtant faux. En effet, rangé n’est pas la même chose que valide.
Il ne corrigera pas votre code à votre place au-delà de la forme. Une balise de fin devinée est ajoutée et notée, car c’est ce qu’exige la lecture de l’arbre ; cependant, le formateur ne réécrit jamais vos attributs et ne réordonne jamais votre contenu.
Il ne touchera pas à ce qui n’est pas du HTML. Le contenu d’un <script>, d’un <style> ou d’un <pre> est copié tel quel, donc faites-les passer par le validateur JavaScript ou le validateur CSS quand vous voulez les vérifier aussi.
Comment utiliser le formateur HTML
Quatre étapes, et aucune ne demande de compte.
- 1
Collez ou déposez le balisage
Collez donc une page entière ou un seul composant, ou déposez un fichier sur la zone. Parce que le lecteur travaille sur du texte, un fragment convient et un document complet convient aussi.
- 2
Choisissez l’indentation, ou minifiez
Choisissez ensuite deux espaces, quatre espaces ou des tabulations pour la mise en forme, ou une seule ligne pour la minification. Comme le même lecteur pilote les deux, vous passez de l’un à l’autre sans coller à nouveau.
- 3
Lisez les vérifications
Ensuite, parcourez le tableau sous le résultat. Parce que chaque ligne porte une ligne et une colonne, une balise de fin implicite ou une fermeture vide retirée est à un clic plutôt qu’à une chasse.
- 4
Copiez, téléchargez ou continuez
Enfin, copiez le résultat, téléchargez-le en fichier, ou sautez au premier problème et corrigez-le. Après cela, le balisage est prêt pour votre éditeur ou pour la page.
Pourquoi utiliser ce formateur HTML
Cinq raisons, et chacune épargne quelques minutes à plisser les yeux.
Il vous donne toujours un résultat
Parce que le HTML est permissif par conception, le lecteur range un balisage imparfait au lieu de le refuser. Ainsi vous obtenez une sortie rangée et une liste de notes, pas une erreur et un volet vide.
Il indique la ligne et la colonne
Chaque note porte les deux, et un bouton saute droit à l’endroit. Par conséquent, un long gabarit devient une lecture courte plutôt qu’une recherche.
Il conserve vos blocs script et style
Parce que le contenu d’un élément à texte brut n’est pas du HTML, le formateur le recopie sans y toucher. Ainsi une page ressort rangée sans que son JavaScript soit abîmé.
Rien n’est envoyé
Tout le travail se fait dans cet onglet. Ainsi une page issue d’un dépôt privé ou d’un build client se colle et se lit ici sans risque.
Mise en forme et minification au même endroit
Un seul lecteur pilote les deux modes, donc vous mettez en forme pendant que vous travaillez et minifiez quand vous publiez, sans second outil ni second collage.
Des habitudes qui gardent le balisage rangé
Six habitudes qui gardent une page facile à lire et rapide à mettre en forme.
- Fermez une balise en même temps que vous l’ouvrez Ainsi le partenaire est déjà là quand vous remplissez le milieu. C’est une petite habitude, et pourtant elle supprime presque toutes les notes d’élément non fermé avant qu’elles n’arrivent.
- Mettez chaque valeur d’attribut entre guillemets Une valeur sans guillemets marche jusqu’à ce qu’elle rencontre un espace ou une barre oblique, et là elle avale ce qui suit. Parce que les guillemets mettent fin aux devinettes, le formateur n’a jamais à les ajouter pour vous.
- Indentez par imbrication, pas à l’œil Une balise enfant se place un niveau à l’intérieur de son parent, toujours. Par conséquent, un formateur peut confirmer la forme que vous vouliez, au lieu d’hériter de l’espacement qui a dérivé.
- Gardez un élément de bloc par ligne Les balises en ligne peuvent partager une ligne, mais une section, une liste ou un tableau se lisent mieux empilés. Ainsi l’arbre sur la page correspond à l’arbre dans votre tête.
- Validez avant de minifier Un minificateur fait confiance à son entrée, donc une balise laissée ouverte ressort ouverte et plus difficile à repérer. Mettez donc d’abord en forme, lisez les vérifications, et seulement ensuite réduisez le fichier.
- Laissez les blocs bruts à leurs propres outils Un script ou une feuille de style dans la page n’est pas du HTML. Ainsi, vérifiez-les avec un validateur conçu pour eux plutôt que d’attendre d’un formateur qu’il les lise.
Six façons dont le balisage piège les gens
Aucun de ces cas n’arrête un navigateur ; voilà pourquoi ils partent facilement en production par accident.
Un élément de liste sans balise fermante
Attention ici. Un
<li>se ferme tout seul quand le suivant s’ouvre, donc la page paraît correcte et la source cache à quel point l’imbrication est profonde.Un élément vide avec une balise fermante
Un
</br>ou un<img>fermé ne veut rien dire pour un navigateur, donc il est retiré en silence. Parce que rien ne casse, la balise orpheline survit relecture après relecture.Deux attributs portant le même nom
Un navigateur garde le premier
classet ignore le second. Ainsi un style qui ne s’applique pas est souvent un attribut en double plutôt qu’un mauvais sélecteur.Un élément de bloc dans un élément en ligne
Un
<div>dans un<span>s’affiche, pourtant il est invalide et il perturbe la mise en page. Ainsi le balisage peut être parfaitement indenté et malgré tout faux.Un commentaire jamais fermé
Un commentaire sans marqueur de fin avale le reste du fichier. Ainsi tout ce qui le suit disparaît de la page, et c’est le seul cas où le formateur n’affiche rien.
Un guillemet oublié dans un attribut
Un guillemet fermant manquant laisse la valeur déborder sur l’attribut suivant. Parce que la balise se lit alors comme une seule longue valeur, l’erreur apparaît loin de l’endroit où vous l’avez faite.
Questions sur le formateur HTML
Ce formateur HTML est-il gratuit ?
Oui. Il n’y a ni compte, ni limite, ni offre payante. Ainsi vous mettez en forme autant de pages que vous voulez.
Envoie-t-il mon balisage ?
Non. Tout le travail se fait dans cet onglet, et rien n’est envoyé où que ce soit. Ainsi une page soumise à une clause de confidentialité reste où elle est.
Quelle est la différence entre mettre en forme et minifier ?
Les deux lisent le balisage de la même façon. La mise en forme écrit l’arbre sur des lignes indentées pour que vous puissiez le lire ; la minification, en revanche, le réécrit sans les espaces afin qu’il pèse moins lourd.
Garde-t-il les espaces entre mes balises en ligne lors de la minification ?
Oui. La minification réduit les suites d’espaces au lieu de les supprimer, car un espace entre deux éléments en ligne est visible sur la page et le retirer collerait deux mots.
Touche-t-il à mes blocs script et style ?
Non. Le contenu d’un élément script, style ou pre est copié tel quel, car ce n’est pas du HTML et le reformater le casserait.
Pourquoi a-t-il ajouté des balises de fin que je n’ai jamais écrites ?
Parce que certaines balises, comme un élément de liste ou une ligne de tableau, peuvent rester ouvertes à dessein. Le lecteur ajoute la balise de fin implicite et la signale, si bien que l’arbre devient explicite.
Pourquoi a-t-il retiré une balise fermante sur mon image ?
Un élément vide comme une image ou un saut de ligne ne prend jamais de balise fermante. Ainsi une balise fermante sur l’un d’eux ne veut rien dire, donc le lecteur la retire et nomme la ligne.
Valide-t-il mon HTML ?
Non. Il vérifie la forme, pas tout le règlement ; une page peut donc ressortir bien rangée tout en restant invalide. En effet, rangé et valide sont deux questions différentes.
Peut-il mettre en forme un document entier, pas seulement un fragment ?
Oui. Une page complète avec un doctype, un head et un body se met en forme, et un simple composant aussi. Par ailleurs, les numéros de ligne renvoient à ce que vous avez collé.
Conserve-t-il la casse de mes attributs SVG ?
Oui, par défaut. Un SVG en ligne garde viewBox et linearGradient à l’identique, car le SVG distingue la casse là où le HTML l’ignore. En revanche, une option met tout en minuscules si vous le préférez.
Refusera-t-il parfois de mettre en forme ?
Presque jamais. Seul un commentaire, un doctype ou un bloc script sans fin arrête le lecteur, car il ne trouve pas où ce bloc devait se refermer.
Fonctionne-t-il avec Vue, Svelte ou des fichiers de gabarit ?
En grande partie. Les attributs de framework comme une valeur liée ou une directive survivent, car le lecteur est tolérant sur les noms d’attributs. Pourtant, une syntaxe de gabarit lourde est lue comme du texte.
Puis-je mettre mes noms de balises et d’attributs en minuscules ?
Oui. Une option passe chaque nom de balise et d’attribut en minuscules, ce qui est le style HTML courant, tout en laissant votre texte et vos valeurs tranquilles.
Comment aller directement à un problème ?
Chaque note porte une ligne et une colonne, et un bouton fait défiler l’entrée jusqu’au premier. Ainsi vous arrivez sur le caractère plutôt que sur la zone.
Puis-je répartir de longues listes d’attributs sur plusieurs lignes ?
Oui. Une option répartit une balise aux nombreux attributs sur plusieurs lignes quand la ligne devient trop longue, ce qui garde un composant large lisible. De cette façon, rien ne déborde.
La minification ici est-elle la même que sur la page du minificateur HTML ?
Le résultat est le même resserrement. Le minificateur HTML dédié ajoute quelques options pour une page que vous allez servir ; tournez-vous donc vers lui au moment de publier.
Compte-t-il quelque chose ?
Oui. Il indique le nombre d’éléments, l’imbrication la plus profonde et la taille de sortie, ce qui aide quand vous vérifiez si un collage a perdu quelque chose. En effet, un chiffre qui change saute aux yeux.
Faut-il un compte ou une extension ?
Non. Il n’y a ni inscription, ni plugin, ni extension. Ainsi vous fermez l’onglet une fois le balisage rangé.
Fonctionne-t-il sur un téléphone ?
Oui. Les volets s’empilent et les notes passent à la ligne, si bien qu’une mise en forme rapide marche sur un téléphone ; cependant, un fichier long reste plus facile au clavier.
Et ma confidentialité ?
Tout se passe dans le navigateur, donc aucun balisage n’est stocké ni envoyé. De plus, vous pouvez constater le comportement vous-même en ouvrant la page avec l’onglet réseau ouvert.
Les outils qui vont avec celui-ci
Quatre pages vers lesquelles ce même travail mène souvent.
Une fois la page rangée, réduisez-la pour la production. En effet, un navigateur télécharge chaque octet, donc minifiez le balisage que vous allez servir.
Ouvrir l’outil →Encodeur et décodeur d’entités HTML
Un formateur laisse votre texte tranquille, donc transformez ici un chevron égaré en entité quand vous devez montrer du balisage plutôt que l’afficher.
Ouvrir l’outil →Le cousin plus strict, où une balise de fin manquante est une erreur plutôt que quelque chose à compléter. Ainsi, mettez en forme un flux ou un fichier de configuration avec le bon lecteur.
Ouvrir l’outil →Une fois le balisage bien lisible, colorez-le pour un article ou une diapositive. Parce que les couleurs suivent les jetons, une page rangée se colore proprement.
Ouvrir l’outil →
Rangez le balisage, puis publiez-le
Collez la page, choisissez une indentation ou la minification, puis lisez les notes sous le résultat. Rien ne s’exécute et rien n’est envoyé. De plus, la plupart des fichiers se mettent en forme avant que l’eau bouille, car le tableau des vérifications nomme chaque balise que le lecteur a dû fermer pour vous.