GUIDES PRATIQUES · Web et codes
Espaces et indentation HTML : les points à vérifier
Repérez les espaces qui peuvent changer une page et les contrôles utiles après le formatage d’un fragment HTML.
Par Puffinmint · Mise à jour le
Pourquoi les espaces entre balises comptent
L’indentation facilite la lecture, mais les nœuds de texte appartiennent au document. Des espaces entre éléments inline peuvent séparer des mots ou des images.
Formater une copie en préservant le texte
Travaillez sur une copie HTML. Attributs et blocs pre, script, style, textarea et title sont préservés ; les espaces entre blocs sont ajustés. Le JSX n’est pas converti et le document n’est pas validé.
-
Données saisies
<div><p>A <strong>B</strong> C</p></div> -
Étapes du calcul
Choisir et appliquer la méthode
-
Résultat
<div> <p>A <strong>B</strong> C</p> </div>
ESSAYEZ CETTE ÉTAPE
Formateur HTML en ligne
Travaillez dans ce guide : chargez un exemple, lancez l’outil et modifiez les données pour comparer les résultats. Le second essai explore un autre cas.
Un exemple reproductible
Dans une phrase avec un élément strong, les espaces autour de l’élément séparent les mots. Conservez-les. Le contenu de pre doit garder ses retours à la ligne et espaces initiaux, même si le conteneur est indenté.
Conserver une espace insécable
Le second exemple contient une espace U+00A0 entre deux div. Formatez puis copiez le résultat : cette espace doit rester. L’outil ne propose pas d’aperçu HTML et n’exécute aucun script.
Résultat
Saisissez les données pour voir le résultat.
Espaces inline et contenu de pre
Dans une phrase avec un élément strong, les espaces autour de l’élément séparent les mots. Conservez-les. Le contenu de pre doit garder ses retours à la ligne et espaces initiaux, même si le conteneur est indenté.
Cas d’utilisation
- Données saisies
<div><p>A <strong>B</strong> C</p></div>- Résultat
<div> <p>A <strong>B</strong> C</p> </div>
Vérifier le code dans le projet
Vérifiez avec le CSS du projet, notamment white-space, et les tests du template. Le formatage ne prouve pas que les balises sont correctement imbriquées. L’outil affiche du texte sans exécuter HTML ni scripts.
Il s’agit de données d’exemple, pas de mesures d’un cas réel. Le résultat utilise le même moteur que l’outil complet. Comparez-le aux étapes du guide puis cochez les vérifications après contrôle.
| Paramètre | Valeur |
|---|---|
| Quelles sont les limites de cet outil ? | Au plus 100 000 caractères et 10 000 jetons. HTML seulement, sans validation ni JSX ; les espaces entre blocs peuvent changer. |
| Traitement et confidentialité | Les données et résultats sont traités dans votre navigateur et ne sont pas envoyés au serveur. Si elles sont actives, les statistiques agrégées enregistrent seulement l’outil et l’issue du traitement, sans son contenu. |