Si vous avez déjà ouvert le fichier HTML de quelqu'un d'autre et vous êtes senti complètement perdu au milieu d'un enchevêtrement de balises, vous comprenez déjà pourquoi l'indentation est importante. Apprendre à indenter correctement en HTML est l'une des premières habitudes qui distinguent un développeur qui écrit du code d'un développeur qui écrit du code lisible.
Ce guide explique comment structurer votre document HTML avec une indentation correcte au niveau du code et comment indenter visuellement le texte de votre page Web à l'aide des propriétés CSS.
En bref : L’indentation en HTML
- L'indentation HTML fonctionne à deux niveaux : la structure du code dans votre éditeur et l'indentation visuelle du texte sur la page rendue
- Utilisez deux espaces par niveau d'imbrication pour l'indentation du code et conservez cette indentation dans tout le fichier
- Pour l'indentation visuelle du texte, utilisez `text-indent` uniquement pour la première ligne, `margin-left` pour décaler un bloc entier et `padding-left` pour l'indentation à l'intérieur des conteneurs stylisés
- Ne jamais utiliser ou<blockquote> juste pour créer un retrait visuel
- Utilisez le formateur intégré de VS Code ou Prettier pour automatiser l'indentation dans toute votre équipe
Pourquoi une indentation correcte en HTML est-elle importante ?
Imaginez lire un livre sans chapitres, sans paragraphes et sans espace entre les phrases. C'est exactement à cela que un code HTML pour tout développeur qui doit travailler avec.
Une indentation correcte permet de visualiser immédiatement les relations parent-enfant entre les éléments. Elle accélère le débogage car une balise de fermeture manquante est repérable en un coup d'œil.
Cela rend également la collaboration beaucoup moins pénible, car un nouveau développeur rejoignant votre équipe n'a pas besoin de passer une heure à déchiffrer la structure de votre code avant de pouvoir contribuer.
Au-delà de la lisibilité, d'exploration des moteurs de recherche analysent votre code HTML pour comprendre la structure de la page. Un code HTML propre et bien structuré aide ces robots à interpréter correctement la hiérarchie de votre contenu, ce qui peut indirectement améliorer votre référencement.
Un code propre permet de créer de meilleurs sites web
Du HTML sémantique au développement WordPress évolutif, nous créons des sites web propres, rapides et faciles à maintenir, adaptés à la croissance de votre entreprise.
Deux types d'indentation HTML à connaître
Avant d'aborder les techniques, il convient de dissiper une confusion qui piège de nombreux débutants. L'expression « indentation en HTML » recouvre deux réalités distinctes
- L'indentation au niveau du code fait référence à la manière dont vos balises HTML sont disposées dans votre éditeur de code. Elle n'affecte pas ce que les utilisateurs voient sur le site web. Son seul but est de rendre votre code lisible en représentant visuellement la hiérarchie d'imbrication des éléments.
- L'indentation visuelle du texte consiste à indenter le contenu de la page web rendue afin que les utilisateurs voient une indentation réelle. Ce comportement est contrôlé par les propriétés CSS. Confondre ces deux notions conduit les développeurs à mal utiliser des éléments comme
Comment indenter son code HTML dans l'éditeur ?
C’est dans votre éditeur de code que commencent les bonnes habitudes d’indentation. Bien le configurer dès le départ vous évitera des heures de débogage et de reformatage par la suite.
Comprendre la structure parent-enfant
HTML est un langage hiérarchique. Lorsqu'un élément est imbriqué dans un autre, il devient un enfant de cet élément parent. L'enfant doit toujours être indenté d'un niveau par rapport à son parent afin de rendre cette relation visible dans le code.
Voici du code HTML non indenté qui fonctionne mais qui est pénible à lire :
<div><h1>Titre de la page</h1><p> Ceci est un paragraphe.</p><ul><li> Article un</li><li> Article deux</li></ul></div>Voici le même code HTML avec l'indentation correcte :
<div><h1>Titre de la page</h1><p> Ceci est un paragraphe.</p><ul><li> Article un</li><li> Article deux</li></ul></div>La structure apparaît immédiatement claire.<h1> ,<p> , et<ul> sont tous des enfants de<div> . Le<li> Les éléments se situent à un niveau plus profond car ils sont des enfants de<ul> Chaque niveau d'imbrication est systématiquement décalé de la même valeur.
Deux espaces, quatre espaces ou des tabulations ?
Le choix précis importe bien moins que la cohérence. La plupart des guides de style HTML préconisent par défaut deux espaces par niveau d'indentation, car le code HTML est profondément imbriqué et quatre espaces peuvent rapidement le décaler loin à droite.
L'essentiel est de choisir un style et de l'utiliser pour l'ensemble du projet. Mélanger deux espaces dans certains fichiers et quatre dans d'autres engendre des différences complexes dans la gestion des versions et des tensions au sein des équipes.
Utilisation de VS Code pour automatiser l'indentation
VS Code gère parfaitement l'indentation par défaut. Lorsque vous écrivez du HTML et appuyez sur Entrée après une balise ouvrante, VS Code indente automatiquement la ligne suivante. Si vous ouvrez un fichier existant dont l'indentation est incohérente, vous pouvez corriger l'ensemble du document en une seule fois.
- Sous Windows, appuyez sur Maj + Alt + F pour formater l'ensemble du document.
- Sur Mac, appuyez sur Maj + Option + F.
Pour les équipes, l'extension Prettier applique des règles d'indentation uniformes à l'éditeur de chaque développeur grâce à un fichier de configuration .prettierrc partagé. Ceci élimine totalement les conflits de fusion liés à l'indentation et les difficultés lors des revues de code.
Comment indenter du texte en HTML avec CSS ?
Passons maintenant à la partie qui influe directement sur ce que vos utilisateurs voient : l’indentation visuelle du texte sur la page web. Vous utiliserez trois propriétés CSS principales, chacune ayant un comportement différent.
La propriété CSS text-indent
La propriété `text-indent` applique un retrait uniquement à la première ligne d'un bloc de texte. Elle s'applique aux éléments de niveau bloc tels que les paragraphes et les titres. Toutes les lignes suivantes du même élément conservent leur marge normale.
p { text-indent: 30px; }Cela indente la première ligne de chaque paragraphe de 30 pixels. Vous pouvez utiliser différentes unités selon votre mise en page. Les pixels vous donnent une indentation absolue fixe.
L'utilisation des unités em ou rem lie le retrait à la taille de la police, ce qui assure une meilleure adaptation aux différentes tailles d'écran. Les valeurs en pourcentage définissent le retrait par rapport à la largeur du bloc conteneur.
p { text-indent: 2em; }Vous pouvez également utiliser des valeurs négatives pour créer un effet de retrait négatif, où la première ligne dépasse à gauche tandis que les lignes suivantes sont indentées :
p { text-indent: -2em; padding-left: 2em; }La compatibilité de l'indentation du texte avec les navigateurs modernes est excellente. Aucun préfixe propriétaire n'est requis.
La propriété de la marge gauche
La propriété margin-left permet d'indenter un bloc de contenu entier en décalant l'élément complet vers la droite. Ceci est utile pour décaler un paragraphe, une section ou un conteneur entier, et non seulement sa première ligne.
.section-indentée { marge-gauche: 40px; }La propriété margin-left fonctionne sur presque tous les éléments HTML.
Il est important de noter que les marges créent un espace autour de l'élément, décalant ainsi l'élément lui-même et non seulement le texte qu'il contient. Ceci est particulièrement important dans les mises en page Flexbox ou en grille, où l'espacement est déjà géré par le système de mise en page.
La propriété de remplissage à gauche
La propriété padding-left crée un espace à l'intérieur de la boîte de contenu d'un élément, entre la bordure et le contenu. C'est la principale différence avec margin-left.
.callout-box { padding-left: 24px; background-color: #f5f5f5; border-left: 4px solid #0057ff; }Si vous aviez utilisé margin-left au lieu de padding-left, le texte serait indenté, mais la couleur et la bordure commenceraient au niveau du bord gauche d'origine, ce qui donnerait un aspect cassé.
La propriété `padding-left` préserve la forme du conteneur tout en décalant le texte vers l'intérieur. Utilisez-la lorsque vous indentez du texte dans un conteneur avec un arrière-plan, une bordure ou un modèle de boîte défini.
Indentation des listes HTML et des éléments imbriqués
Les listes HTML possèdent une indentation par défaut appliquée par les navigateurs, mais sa valeur exacte varie entre Chrome, Firefox et Safari. Pour un résultat homogène et maîtrisé, définissez-la explicitement en CSS :
ul, ol { padding-left: 24px; }Pour les listes imbriquées, appliquez une indentation supplémentaire à l'élément imbriqué afin de créer un deuxième niveau clair :
<ul><li>Article principal<ul><li> Élément imbriqué A</li><li> Élément imbriqué B</li></ul></li></ul>En contrôlant le padding-left à chaque niveau via CSS, on obtient une liste à deux niveaux propre et indentée, qui s'affiche de manière cohérente sur tous les navigateurs.
Éléments HTML qui gèrent l'indentation nativement
Certains éléments HTML intègrent un comportement d'indentation dans les navigateurs. Savoir les utiliser correctement et éviter les erreurs permet de garantir l'accessibilité et la cohérence sémantique de votre code.
- L'élément blockquote s'affiche par défaut avec un retrait dans la plupart des navigateurs. De nombreux développeurs l'utilisent à tort uniquement pour cet effet visuel. C'est une erreur.
Le<blockquote> L'élément `<citation>` sert à baliser le contenu cité d'une source externe. Les lecteurs d'écran l'interprètent comme une citation ; son utilisation sur du contenu non cité peut donc induire en erreur les utilisateurs de technologies d'assistance. Utilisez-le uniquement pour les citations et privilégiez CSS pour le reste.
- L'élément <pre> préserve l'intégralité des espaces, des sauts de ligne et de l'indentation tels qu'ils apparaissent dans votre fichier HTML. Il est donc indispensable pour afficher des extraits de code et du texte préformaté où l'espacement est important.
- L'utilisation d'espaces insécables ( ) est une habitude courante chez les débutants pour créer rapidement une indentation. La solution est de ne jamais les utiliser à cette fin. Ils ne s'adaptent pas à la largeur de l'écran ; ils provoquent des sauts de ligne imprévisibles sur les petits écrans. Utilisez toujours CSS à la place.
Erreurs courantes d'indentation à éviter
Mélanger tabulations et espaces dans un même fichier est l'erreur la plus fréquente en équipe. Le résultat est correct dans un éditeur, mais illisible dans un autre. Configurez votre éditeur pour convertir automatiquement les tabulations en espaces ou utilisez Prettier pour garantir un style uniforme.
L'utilisation de styles en ligne sur chaque élément individuel au lieu d'une classe CSS réutilisable engendre un véritable cauchemar en matière de maintenance.
Mettre à jour style="margin-left: 40px" sur vingt balises de paragraphe différentes dans votre code HTML est un travail fastidieux qu'une simple classe CSS aurait entièrement éliminé.
Un retrait si important que les lignes se coupent dans l'éditeur indique que la structure HTML elle-même a besoin d'être simplifiée, et pas seulement reformatée. Si votre code atteint régulièrement dix ou douze niveaux de profondeur, il est judicieux de revoir sa structure.
Accessibilité et indentation
La plupart des guides négligent ce point. Une indentation correcte au niveau du code influe directement sur la précision avec laquelle les technologies d'assistance analysent votre page.
- Lorsque les éléments sont correctement imbriqués et que la hiérarchie HTML est propre, les lecteurs d'écran peuvent identifier avec précision les points de repère, les titres et les zones de contenu.
- Lorsque des éléments sont mal utilisés pour leurs effets visuels secondaires, les lecteurs d'écran annoncent un contexte erroné aux utilisateurs.
Une indentation correcte facilite également grandement l'audit de la sémantique de votre code HTML à l'aide d'outils comme WAVE et axe DevTools.
Réflexions finales
Une indentation HTML propre est l'une de ces habitudes qui rapportent bien plus qu'elle ne coûte.
Le temps que vous consacrez à la mise en forme correcte d'un projet vous est rendu utile à chaque fois que vous le déboguez, à chaque fois qu'un nouveau développeur ouvre le fichier, et à chaque fois que vous relisez votre propre code des mois plus tard et le comprenez encore immédiatement.
Chez Seahawk Media, nous créons et auditons des sites web où la qualité du code influe directement sur les performances, la maintenabilité et l'expérience utilisateur.
Si votre site web a besoin d'un audit de code, d'une analyse de performance ou d'un développement complet, contactez-nouset construisons ensemble un site aussi performant en interne qu'il en a l'air à l'écran.
Foire aux questions
L'indentation HTML a-t-elle une incidence sur l'apparence d'une page web pour les utilisateurs ?
L'indentation au niveau du code dans votre fichier HTML n'affecte en rien le rendu final. Elle influe uniquement sur l'affichage du code dans votre éditeur. L'indentation visuelle sur la page web est gérée par des propriétés CSS telles que `text-indent`, `margin-left` et `padding-left`.
Quelle est la différence entre margin-left et padding-left pour l'indentation ?
La propriété `margin-left` crée un espace à l'extérieur du cadre de l'élément, décalant ainsi l'élément entier vers la droite. La propriété `padding-left` crée un espace à l'intérieur du cadre de l'élément, éloignant le contenu du bord gauche de l'élément.
Utilisez la propriété padding-left lorsque l'élément possède une couleur de fond ou une bordure qui doit rester alignée avec son bord extérieur.
Dois-je utiliser des tabulations ou des espaces pour l'indentation HTML ?
La plupart des guides de style HTML recommandent l'utilisation d'espaces, deux espaces étant la norme la plus courante. L'essentiel est de garantir la cohérence du style dans tout le fichier et au sein de votre équipe. Utilisez Prettier pour appliquer automatiquement le style choisi.
Est-il correct d'utiliser des espaces insécables pour l'indentation en HTML ?
Non. Utiliser des caractères pour créer des indentations est une mauvaise pratique. Cela ne s'adapte pas à la taille de l'écran, pose des problèmes d'accessibilité et l'affichage est incorrect sur les écrans de différentes largeurs. Utilisez toujours les propriétés CSS pour toute indentation qui doit apparaître sur la page web rendue.
