Qu'est-ce que le formatage HTML
Le formatage HTML consiste à ajouter automatiquement des sauts de ligne et une indentation uniforme au code HTML en suivant la hiérarchie d'imbrication des balises, afin de transformer un code source entassé sur une seule ligne en une structure claire dont on comprend la hiérarchie d'un coup d'œil. Le code minifié que vous recevez, le code produit par un moteur de template, ou les fragments HTML renvoyés par une API peuvent tous être restaurés en une structure lisible grâce au formatage HTML.
Cela ne modifie pas l'affichage de la page dans le navigateur, cela ne change que la mise en forme du code. Comprendre ce point permet de clarifier de nombreuses questions par la suite.
Que signifie le formatage HTML
Que signifie le formatage HTML ? En une phrase : sans modifier les balises, les attributs ni le contenu textuel, recalculer la profondeur hiérarchique de chaque balise et dessiner cette hiérarchie avec des sauts de ligne et des indentations. Il s'agit de mise en forme, pas de réécriture.
Concrètement, un outil de formatage fait trois choses :
- Identifier les balises ouvrantes, fermantes et auto-fermantes, et établir les relations parent-enfant
- Déterminer, selon la profondeur hiérarchique, combien d'espaces ou de tabulations placer devant chaque balise
- Traiter les nœuds textuels, décider quel contenu doit être mis à la ligne et quel contenu doit rester tel quel
Après formatage, texte devient une écriture sur trois lignes, avec indentation. Plus l'imbrication est profonde, plus l'indentation est visible, et plus les erreurs d'imbrication sont faciles à repérer.
Il faut rappeler que les espaces à l'intérieur de balises comme ` et ` ont une valeur sémantique. Un bon outil de formatage doit ignorer ces zones, sinon l'affichage de la page serait modifié. Avant utilisation, il est conseillé de vérifier si l'outil protège ce type de balises.
Étapes : comment bien formater un morceau de HTML
Que vous utilisiez un outil en ligne ou un éditeur local, le processus est globalement le même.
- Récupérez le HTML d'origine. Vous pouvez le faire depuis le code source du navigateur, en copiant depuis une réponse d'API, ou en ouvrant un fichier.
- Faites un premier survol. Si le code contient du script ou du style mélangé, l'indentation deviendra plus longue après formatage ; il suffit d'en être conscient.
- Collez ou importez dans l'outil de formatage. Vérifiez si l'outil s'exécute localement dans le navigateur ; une exécution locale signifie que le code n'est pas envoyé à un serveur.
- Choisissez le mode d'indentation. Espaces ou tabulations, choisissez l'un des deux ; la largeur d'espace courante est de 2 ou 4 ; si l'équipe a une norme, suivez-la.
- Lancez le formatage et comparez les différences avant/après. Vérifiez surtout si des balises ont été fusionnées ou séparées par erreur.
- Copiez le résultat et sauvegardez. S'il s'agit juste d'une consultation temporaire, ce n'est pas grave de ne pas sauvegarder.
Si vous ne faites que jeter un œil occasionnel au code donné par quelqu'un, le plus simple est d'utiliser l'outil de formatage HTML en ligne ; si le code doit entrer dans un dépôt de versions, il est conseillé d'utiliser le formatage intégré à l'éditeur, dont la configuration peut suivre le projet. Pour davantage d'outils exécutés localement, consultez la liste d'outils.
Pourquoi l'indentation est-elle chaotique après le formatage HTML
Une indentation chaotique après le formatage HTML n'est généralement pas due à un outil défectueux, mais à une entrée qui contient des éléments difficiles à interpréter pour l'outil. Il existe quatre causes courantes.
La première catégorie est une balise non correctement fermée. S'il manque une balise fermante, l'outil ne peut pas déterminer la hiérarchie du contenu suivant, et l'indentation se décale globalement.
La deuxième catégorie est la présence de syntaxe de template. Des espaces réservés comme les conditions ou les boucles ne sont pas du HTML standard ; l'outil les traite comme du texte ordinaire, et la hiérarchie est donc mal calculée.
La troisième catégorie est le traitement de balises sensibles aux espaces. Si le contenu de `` est réindenté, l'affichage change.
La quatrième catégorie est une configuration d'indentation incohérente. Utiliser 2 espaces cette fois, puis des tabulations la fois suivante, donne l'impression d'un désordre.
Il est conseillé de commencer le diagnostic par les balises fermantes, puis d'examiner la syntaxe de template, et enfin de vérifier les paramètres d'indentation. En éliminant ces points, la grande majorité des problèmes d'indentation chaotique peuvent être expliqués.
Différence entre formatage HTML et minification
La différence entre formatage HTML et minification est essentiellement une question de direction opposée. Le formatage ajoute des espaces, la minification en retire.
- Formatage : ajoute des sauts de ligne et des indentations, le fichier grossit, la lecture humaine est facilitée
- Minification : supprime les sauts de ligne, les indentations, les commentaires et les espaces superflus, le fichier rétrécit, le transfert est plus rapide
Les deux servent des objectifs différents. En phase de développement, vous avez besoin du formatage, car il faut lire, modifier et diagnostiquer. En phase de mise en production, vous avez besoin de la minification, car il faut réduire le volume transféré et accélérer le chargement initial.
Une pratique utile consiste à conserver le code source formaté dans le dépôt de versions, puis à minifier automatiquement lors de la construction pour produire les fichiers de production. Cela facilite la collaboration sans sacrifier les performances en ligne. À l'inverse, si vous ne disposez que du code minifié, utiliser le formatage HTML pour restaurer la lisibilité est la première étape du diagnostic.
Attention, la minification dégrade la lisibilité, et le formatage ne peut pas restaurer à 100 % la mise en forme d'origine. Le nombre d'espaces utilisés par l'auteur original, l'emplacement des commentaires, ne seront pas nécessairement identiques après formatage. Ce qui est restauré, c'est la structure, pas l'historique.
Que faire si le formatage HTML d'un gros fichier se bloque
Lorsque le formatage HTML d'un gros fichier se bloque, la plupart du temps le navigateur traite en mono-thread une très grande chaîne, et la coloration syntaxique s'exécute en même temps, ce qui sollicite fortement la mémoire et le thread principal.
Vous pouvez essayer dans l'ordre suivant :
- Désactivez d'abord la coloration syntaxique ou le panneau d'aperçu, ne gardez que le formatage lui-même
- Découpez le fichier, formatez par modules, puis reassemblez
- Passez à un éditeur de bureau, qui gère généralement mieux les gros fichiers
- Si vous cherchez seulement un fragment, localisez-le par recherche et ne formatez que ce petit passage
Le critère de « gros » varie selon l'appareil. Un même fichier peut être fluide sur un ordinateur performant et bloquant sur un appareil ancien. Donc face à un blocage lors du formatage HTML d'un gros fichier, essayez d'abord un autre appareil ou un autre outil ; cela permet de distinguer rapidement s'il s'agit d'un problème de fichier ou d'environnement.
De plus, il est conseillé de sauvegarder le fichier original avant le formatage. Dans des cas extrêmes, l'outil peut traiter incomplètement ; avec une sauvegarde, pas besoin de recommencer.
Le formatage HTML sur mobile sans installation est-il possible
Le formatage HTML sur mobile sans installation est possible, à condition que l'outil s'exécute localement dans le navigateur. Ce type d'outil s'utilise dès l'ouverture de la page web, sans installer d'application ni dépendre d'un compte.
Quelques points à noter sur mobile :
- Lors du collage de code long, le champ de saisie peut n'afficher qu'une partie ; vérifiez que le collage est complet avant d'exécuter
- L'écran est étroit ; lorsque l'indentation est profonde, le code se replie automatiquement, ce qui donne l'impression d'une indentation chaotique, alors qu'il s'agit juste d'un retour à la ligne d'affichage
- Lors de la copie du résultat, vérifiez qu'il n'a pas été tronqué par le clavier ou le système
Le formatage HTML sur mobile sans installation convient surtout à la consultation temporaire et à la vérification rapide de structure, pas à la modification prolongée de code. Pour de vraies modifications importantes sur mobile, l'expérience est bien inférieure à celle du bureau. Sa valeur réside dans sa disponibilité à tout moment, pas dans le remplacement d'un éditeur.
À quoi sert le formatage HTML lors du débogage d'API
Le formatage HTML lors du débogage d'API consiste à formater le fragment HTML renvoyé avant de l'examiner. De nombreuses API, en cas d'erreur, renvoient une page d'erreur HTML plutôt qu'un format de données structuré ; lu directement, c'est une seule ligne, difficile à localiser.
Après formatage, vous pouvez rapidement voir :
- S'il s'agit d'une page complète ou d'un fragment
- À quel niveau de balise se cache le message d'erreur
- Si le contenu a été remplacé par une passerelle ou une couche intermédiaire
Dans cette étape de formatage HTML pour le débogage d'API, il est conseillé de conserver une copie brute de la requête et de la réponse ; le formatage ne sert qu'à la lecture, ne comparez pas les chaînes avec le contenu formaté, car les différences d'espaces peuvent fausser le jugement.
Si l'API renvoie du JSON contenant une chaîne HTML, commencez par analyser le JSON, puis formatez séparément ce fragment HTML ; le résultat sera meilleur.
Questions fréquentes
Le formatage HTML modifie-t-il l'affichage de la page
En principe non. Le formatage n'ajuste que les espaces entre les balises, et le navigateur les fusionne au rendu. L'exception concerne les balises sensibles aux espaces comme ` et `, que les bons outils ignorent.
Après formatage, le code est plus long, est-ce normal
Oui. Le formatage ajoute des sauts de ligne et des indentations, le nombre de caractères augmente forcément. Ces espaces seront supprimés lors de la minification et n'affecteront pas le volume en ligne.
Le formatage peut-il corriger des balises mal écrites
Non. Le formatage n'ajuste que la mise en forme ; il ne complète pas les balises fermantes manquantes et ne corrige pas les imbrications erronées. Les erreurs de structure doivent être corrigées manuellement.
Le code formaté peut-il être mis en ligne directement
Il peut fonctionner, mais ce n'est pas recommandé. Avant la mise en ligne, il faut le minifier pour réduire le volume transféré. La version formatée convient mieux au dépôt de versions pour la lecture humaine.
Les outils exécutés localement sont-ils sûrs
Le code est traité dans le navigateur et n'est pas envoyé à un serveur ; les données de ce type d'outil ne quittent pas la machine locale. Mais la page elle-même reste