Je construis des outils pour gagner ma vie, et la chose la plus courante que je fais avant de lire n'importe qui' ; son front-end est d'exécuter son HTML via un formateur Les modèles de serveur crachent du balisage sur une ligne Les bundlers l'effondrent Un extrait que quelqu'un colle dans Slack arrive avec trois niveaux d'imbrication aplatis dans un mur de crochets d'angle Je ne peux pas déboguer ce que je ne peux pas lire, donc le premier mouvement est toujours le même : collez-le, frappez embellir et laissez la structure se révéler Ce guide est celui que j'aurais aimé avoir remis à mon jeune moi, qui avait l'habitude de réindent le balisage à la main et s'est mal fait mal.
tl;dr : Un formateur HTML ré-indent le balisage pour que vous puissiez lire sa structure, et la minifie à nouveau vers le bas pour qu'elle soit livrée petite Utilisez embellir pendant que vous construisez et débogagez, minifiez pour la production Le Format HTML sur Toolz.dev fait les deux dans votre navigateur, conserve votre script, votre style et votre octet de pré-contenu pour octet, et ne télécharge jamais rien.
Qu'est-ce qu'un formateur HTML ?
Un formateur HTML est un outil qui analyse votre balisage dans son arbre de balises et l'imprime avec une indentation cohérente, un niveau par profondeur d'imbrication C'est la direction d'embellissement L'inverse, minify, supprime l'espacement insignifiant entre les balises afin que le fichier soit aussi petit que possible sans changer la façon dont un navigateur le rend La plupart des bons formateurs, y compris celui sur Toolz.dev, font les deux à partir de la même entrée.
Le mot " ;insignifiant" ; fait un vrai travail dans cette phrase En HTML, certains espaces comptent et d'autres non. La nouvelle ligne et deux espaces que vous placez entre une fermeture </li> et la suivante <li> ne rien changer à propos de la page rendue, donc un formateur est libre de les ajouter, supprimer, ou normaliser Mais les espaces à l'intérieur d'un <pre> bloc, ou l'espace unique entre deux en ligne <a> les éléments, font partie de ce que l'utilisateur voit Un formateur qui ne comprend pas que la différence va volontiers briser votre mise en page C'est la ligne entre un formateur qui aide et celui dont vous apprenez à vous méfier.
Si vous avez utilisé Plus joli dans votre éditeur, vous connaissez déjà le sentiment : vous arrêtez de vous soucier de l'indentation car un outil le garantit Un formateur basé sur un navigateur vous donne la même garantie pour les extraits ponctuels, la sortie générée et le balisage que vous ne contrôlez pas, sans mettre en place de projet.
Pourquoi HTML finit-il par être compliqué en premier lieu ?
Il est utile de savoir d'où vient le désordre, car il vous indique ce qu'un formateur doit survivre.
La première source est le rendu du serveur Un modèle PHP, une vue Rails ou un fichier Blade émet du HTML avec n'importe quel espace que le moteur de modèle avait envie de produire, et après l'exécution du middleware de minification, il s'agit souvent d'une seule ligne longue de plusieurs milliers de caractères. Lorsque quelque chose ne va pas dans le navigateur et que vous appuyez sur " ; Afficher la source," ; c'est ce que vous obtenez.
La deuxième source est copier-coller Vous prenez un composant d'un système de conception, un fragment d'un CMS ou un modèle de courrier électronique que quelqu'un vous a envoyé, et il transporte tout espacement utilisé par la source : onglets et espaces mixtes, imbrication incohérente, espace de suivi. Je passe une grande partie de ma semaine dans WordPress et sortie CMS sans tête, et le balisage généré par CMS est parmi les pires, car il est assemblé à partir de fragments qui ont chacun été formatés différemment.
La troisième source est générée balisage Les outils de build, les éditeurs WYSIWYG, et les fonctions d'exportation produisent du HTML qui n'a jamais été destiné à être lu par un humain C'est correct, mais il est opaque Un formateur le transforme en quelque chose que vous pouvez auditer.
Le fil conducteur est qu'aucune de ces sources ne se soucie de savoir si vous pouvez lire le résultat C'est votre travail, et un formateur est le moyen le plus rapide de le faire.
Comment formater le HTML en ligne ?
Le flux de travail sur Toolz.dev prend environ dix secondes :
- Ouvrez le Format HTML et collez votre balisage dans le panneau de saisie Peu importe qu'il soit minifié sur une ligne, en retrait de manière incohérente ou sur un fragment nu.
- Choisissez Embellir pour l'étendre ou Minifier pour le compresser.
- Pour embellir, choisissez votre indentation : 2 espaces, 4 espaces ou onglets. Deux espaces est la valeur par défaut commune du Web.
- Éventuellement cocher & deviser ; Supprimer les commentaires" ; pour supprimer les commentaires HTML de la sortie.
- Copiez le résultat ou téléchargez-le sous forme
.htmlfichier.
Tout tourne côté client L'analyseur est JavaScript dans votre navigateur, donc le balisage ne touche jamais un serveur Cela compte plus que ce que les gens supposent, ce sur quoi je reviendrai.
Quelle est la différence entre embellir et minifier ?
Ce sont des opérations opposées qui partagent un analyseur, et savoir quand atteindre pour chacune est la plupart des compétences.
Embellir c'est pour les humains Il ajoute des sauts de ligne et de l'indentation pour que l'imbrication soit visible, ce qui est ce que vous voulez lors de l'édition, du débogage, de la diffusion de deux versions ou de l'examen d'une demande de traction Lorsque je chasse un bug de mise en page, je embellis d'abord pour pouvoir voir quel élément est non fermé ou imbriqué d'un niveau trop profond.
La minification est pour les machines Elle supprime l'espace blanc qu'un navigateur ignore donc le fichier est plus petit et plus rapide à transférer Vous minifiez HTML pour la même raison que vous minifiez CSS ou JavaScript : octets sur le temps de coût du fil, et sur une grande page l'espace blanc s'additionne Si vous vous appuyez déjà sur le minificateur HTML pour la compression de production, le formateur est l'outil que vous utilisez pour relire cette sortie lorsque quelque chose se casse.
Voici comment les deux directions se comparent sur les décisions qui diffèrent en réalité :
| Aspect | embellir | réduire |
|---|---|---|
| but | lisibilité | Plus petit fichier |
| Espacement entre les balises | Ajouté et normalisé | enlevé |
| Taille de sortie | Plus grand | Plus petit |
| Quand utiliser | Montage, débogage, révision | Production, transfert |
| Indentation | 2 espaces, 4 espaces ou onglets | nul |
| Résultat rendu | identitaire | identitaire |
La dernière ligne est la plus importante Aucune des deux opérations ne change l'apparence de la page Seuls les espaces qu'un navigateur traite comme des changements insignifiants Si un formateur altère jamais votre sortie rendue, c'est un bug dans le formateur, pas une propriété de formatage.
Le formatage brisera-t-il mon JavaScript, CSS ou texte préformaté ?
C'est la question qui sépare un jouet d'un outil, et c'est la raison pour laquelle je suis pointilleux sur le formateur que j'utilise.
Certains éléments contiennent du contenu où les espaces et les caractères sont significatifs et ne doivent pas être touchés. Le Norme HTML WHATWG classe script et style comme éléments de texte brut et textarea et title en tant qu'éléments de texte brut évaçables À l'intérieur de ceux-ci, un formateur doit traiter le contenu comme opaque S'il essaie de réindenter le JavaScript dans un script balise, il peut déplacer le contenu d'un modèle littéral, changer une expression régulière ou déplacer une ligne à l'intérieur d'une chaîne multi-lignes, et maintenant votre code se comporte différemment Ce n'est pas un changement de formatage, c'est un bug que le formateur a introduit.
le pre element est un cas connexe Son objectif est de préserver les espaces, de sorte que son contenu textuel est affiché exactement comme écrit Un formateur qui se réindent à l'intérieur <pre> change visiblement la page.
Le formateur Toolz.dev gère tout cela en traitant script, style, pre, textarea, et title en tant que contenu brut : il ré-indent le HTML qui les entoure mais copie textuellement leur texte intérieur Votre code et texte préformaté sortent identiques octet pour octet Lorsque j'ai testé cela en le construisant, la barre d'acceptation était simple : a <script> contenant if(a<b){x=1} doit survivre intact, et c'est le cas. Si vous travaillez avec un balisage contenant des scripts ou des styles en ligne, c'est la propriété à vérifier avant de faire confiance à un formateur.
Un formateur peut-il gérer le HTML cassé ou incomplet ?
Le vrai HTML est rarement bien formé comme le XML, et un formateur qui exige la perfection est inutile Les navigateurs sont réputés tolérants : le Algorithme d'analyse HTML définit exactement comment gérer les balises de fin omises et les éléments mal imbriqués, c'est pourquoi une page avec un manquant </li> rend toujours bien Un bon formateur emprunte la même tolérance.
Le cas le plus courant est celui des balises de fin facultatives. HTML vous permet d'omettre la balise de fermeture sur des éléments tels que li, p, td, tr, et option: parce que la spécification dit un ouvert li est implicitement fermé lors du suivant li commence. Donc <ul><li>a<li>b</ul> est valide et le formateur Toolz.dev applique ces règles implicites et proches à produire <li>a</li> et <li>b</li> sur leurs propres lignes, exactement comme un navigateur construirait l'arborescence. Un <p> est fermé automatiquement lorsqu'un élément de bloc s'ouvre à l'intérieur, car un paragraphe ne peut pas contenir de contenu de bloc.
Le deuxième cas est véritablement un balisage cassé : une balise ouverte et jamais fermée, ou une balise de fermeture perdue sans correspondance ouverte. Le formateur ferme tout ce qui reste en suspens à la fin du document et le signale comme un avertissement, vous savez donc que l'entrée était incomplète plutôt que de deviner silencieusement. Ces avertissements sont souvent le moyen le plus rapide de trouver le bug exact que vous êtes venu corriger.
Comparez ce comportement à un formateur strict et contre une opération manuelle :
| s'approche | Balises de fin omises | Tags non fermés | allure |
|---|---|---|---|
| Formateur tolérant (Toolz.dev) | Applique des règles implicites-fermées | Ferme automatiquement et avertit | instant |
| Formateur strict de style XML | Souvent des erreurs | Erreurs sorties | Instantané quand ça marche |
| Réindentation manuelle | Vous le suivez vous-même | Facile à manquer | Lent et sujet aux erreurs |
J'étais dans cette rangée du bas, je me reniais à la main et je manquais un non fermé div trois fois sur dix. L'outil tolérant gagne parce que le vrai balisage est compliqué et que vous voulez que le désordre fasse surface, pas rejeté.
Quand dois-je utiliser un formateur par rapport à mon éditeur ?
Si vous possédez le fichier et qu'il est dans votre projet, votre éditeur plus Prettier ou un équivalent est le bon domicile pour le formatage, car il fonctionne sur sauvegarde et reste cohérent dans toute l'équipe Je ne vous suggère pas de remplacer cela.
Un formateur basé sur un navigateur gagne sa place dans les lacunes que laisse le workflow Vous collez un fragment d'un rapport de bug et devez le lire dès maintenant Vous êtes sur une machine qui n'est pas votre dev box Vous regardez la sortie CMS, un modèle de courriel, ou le balisage généré qui n'a jamais vécu dans un repo Vous voulez minifier un seul extrait sans câbler une étape de construction Dans tous ces cas, ouvrir un onglet est plus rapide que configurer un projet, et le résultat est le même.
Il y a aussi l'angle de confidentialité, ce qui n'est pas une petite chose Parce que l'analyseur Toolz.dev s'exécute entièrement dans votre navigateur, balisage qui contient des URL internes, copie inédite, réponses API intégrées dans un modèle, ou un client' ; s données ne quitte jamais votre appareil Beaucoup de formateurs en ligne PUBLIENT votre entrée sur un serveur pour faire le travail Pour tout ce qui provient d'une base de code de travail, c'est une exposition de données que vous n'avez pas besoin de prendre Je me soucie suffisamment de cela pour qu'il s'agisse d'une règle de conception pour chaque outil du site, sur laquelle j'ai écrit plus dans le Boîte à outils pour les développeurs Web et le guide de Confidentialité des données dans les outils en ligne.
Un workflow pratique qui m'a fait gagner des heures
Voici la boucle que j'exécute en fait lorsqu'une mise en page se comporte mal Embellissez le balisage pour que l'imbrication soit visible Balayez l'indentation pour le niveau qui semble faux, car un indent supplémentaire égaré signifie presque toujours une balise qui ne s'est jamais fermée Lisez les avertissements du formateur, qui nomment fréquemment l'élément non fermé exact Fixez-le dans la source Si le fragment est destiné à la production, minifiez-le sur le chemin du retour Tout le cycle est une minute, et la majeure partie de cette minute est moi qui lis, ne combat pas l'outil.
La même boucle fonctionne pour les audits de contenu Lorsque je vérifie le balisage pour l'accessibilité ou le référencement, j'embellis d'abord pour pouvoir voir la structure de cap et les éléments de point de repère en un coup d'œil, puis je tire des éléments spécifiques dans d'autres outils : conversion d'un morceau en Markdown pour la documentation avec le HTML à Markdown convertisseur, ou générer une table de comparaison avec le Générateur de tables de démar. Le formatage est l'étape qui rend la structure suffisamment lisible pour fonctionner. Si vous souhaitez la routine plus large dans laquelle ces outils s'intègrent, le Outils de productivité des développeurs le guide le présente.
Questions fréquentes
Comment formater le HTML en ligne ?
Collez votre HTML dans le panneau de saisie, choisissez Embellir, choisissez une largeur d'indentation et cliquez sur Format L'outil analyse l'arborescence des balises et la réindente, puis vous permet de copier ou de télécharger le résultat Tous les traitements se déroulent dans votre navigateur, donc rien n'est téléchargé.
Quelle est la différence entre embellir et minifier le HTML ?
Embellir ajoute des sauts de ligne et une indentation pour que l'imbrication soit facile à lire, ce qui est idéal pour l'édition et le débogage La minification supprime l'espace blanc insignifiant entre les balises pour produire un fichier plus petit pour la production Les deux conservent le même résultat rendu ; seul l'espace change.
Le formatage va-t-il changer l'apparence de ma page ?
Non. Le formateur ne modifie que l'espace entre les balises, pas les éléments, attributs ou texte. Le contenu où l'espace est significatif, tel que le texte pré, textarea et inline, est préservé, de sorte qu'une page rend la même chose avant et après le formatage.
Le formateur reformate-t-il mon JavaScript et mon CSS ?
Le contenu n° à l'intérieur des balises de script et de style est traité comme du texte brut et copié textuellement L'outil réinvente le HTML qui les entoure mais ne touche jamais le code lui-même, de sorte que les littéraux de modèle, les expressions régulières et les valeurs CSS restent identiques octet par octet.
Peut-il gérer du HTML cassé ou incomplet ?
Oui, dans les limites de la raison L'analyseur est tolérant : il applique les mêmes règles de fermeture implicite que les navigateurs utilisent pour les balises comme li, p et td, et il ferme automatiquement les balises laissées ouvertes à la fin du document. Quand c'est le cas, il affiche un avertissement pour que vous sachiez que le balisage était incomplet.
Est-il sécuritaire de formater du HTML contenant des données sensibles ?
Oui. L'analyseur fonctionne entièrement en JavaScript dans votre navigateur Aucune requête réseau ne comporte votre balisage, rien n'est stocké et l'outil fonctionne hors ligne une fois chargé. HTML contenant des liens internes, des réponses API ou une copie inédite ne quitte jamais votre machine.
Quelles options d'indentation sont disponibles ?
La sortie Beautify prend en charge 2 espaces, 4 espaces ou onglets. Deux espaces sont la valeur par défaut courante pour les projets Web, quatre espaces conviennent aux équipes qui préfèrent une indentation plus large et les onglets permettent à chaque développeur de définir sa propre largeur d'affichage dans l'éditeur.
En quoi un formateur HTML est-il différent d'un minificateur HTML ?
Un formateur a les deux directions dans un seul outil : embellir pour étendre le balisage pour la lecture, et minifier pour le réduire pour l'expédition Un minificateur dédié ne compresse que Si vous avez principalement besoin de compression de production, le minificateur HTML se concentre sur cela ; si vous basculez entre la lecture et l'expédition, le formateur couvre les deux.
Formatez votre balisage avec le gratuit Format HTML. Il s'exécute entièrement dans votre navigateur, conserve intacts vos scripts et votre contenu préformaté et ne télécharge jamais d'octet.
