Une page de vulgarisation scientifique écrit la formule de l'eau, H2O, où le 2 doit apparaître légèrement abaissé et plus petit que les lettres qui l'entourent. Un peu plus bas, une formule mathématique nomme une suite de variables x1, x2, x3, où chaque indice distingue un terme du suivant.
Dans les deux cas, le chiffre abaissé ne décore rien : il fait partie du sens de la notation. C'est exactement ce que <sub> est censé transmettre, à condition de ne pas s'en servir pour le seul plaisir de décaler visuellement un texte.
Définition
<sub> enveloppe un texte qui doit s'afficher en indice, légèrement en dessous de la ligne de base et généralement dans une taille réduite, parce que cette position fait partie de la notation elle-même : un indice de formule chimique, une variable numérotée en mathématiques, une note dans certaines conventions typographiques anciennes.
Ce que <sub> ne représente jamais, c'est un texte simplement décalé vers le bas pour une raison esthétique. Si le décalage ne change rien au sens de la phrase, la balise n'est pas la bonne réponse, une distinction détaillée un peu plus loin.
Syntaxe et balisage minimal
C'est un élément en ligne, sans attribut spécifique au-delà des attributs globaux. Il enveloppe généralement un caractère ou un très court fragment de texte, jamais une phrase entière.
<p>La formule de l'eau s'écrit H<sub>2</sub>O.</p>Exemple concret
Voici une formule chimique et une notation mathématique, deux cas d'usage classiques où l'indice porte une information et non un simple effet.
<p>Le dioxyde de carbone se note CO<sub>2</sub>.</p>
<p>La suite est définie par u<sub>n+1</sub> = 2 × u<sub>n</sub>.</p>Dans la deuxième ligne, un et un+1 ne désignent pas la même valeur : l'indice distingue deux termes différents de la suite, un rôle que la seule apparence visuelle ne suffirait pas à porter si elle n'était pas comprise comme un indice.
Différence avec vertical-align en CSS
La propriété CSS vertical-align: sub produit visuellement le même décalage que la balise, ce qui entretient la confusion alors que les deux répondent à des besoins différents.
<sub> | CSS vertical-align: sub | |
|---|---|---|
| Ce qu'il exprime | Un indice qui fait partie du sens de la notation | Rien, un simple décalage visuel appliqué à n'importe quel texte |
| Pour un lecteur d'écran | Peut être restitué comme un indice selon le logiciel | Aucune différence avec le texte environnant |
| Bon usage | Formule chimique, variable indexée | Aligner un élément décoratif sans rapport avec une notation |
Utiliser vertical-align: sub pour écrire H2O revient à afficher la bonne formule sans en porter le sens : un moteur de recherche qui indexe le texte, un outil qui extrait une formule chimique automatiquement, ou une personne qui copie-colle le texte perdent l'information que ce 2 est un indice. À l'inverse, appliquer <sub> à un logo ou à une puce décorative pour la décaler légèrement détourne la balise de son rôle et n'apporte rien de plus qu'une propriété CSS ne ferait.
<sub> n'est pas un outil de mise en page pour aligner un élément quelconque un peu plus bas. Si le contenu ne perd aucun sens en redevenant un texte normal sur la ligne, la balise ne convient pas et le décalage relève du CSS.
Bonnes pratiques et piège classique
Réservez <sub> aux cas où l'indice porte une information réelle : formules chimiques, notations mathématiques, quelques usages typographiques hérités comme certaines abréviations. Le piège le plus courant consiste à s'en servir pour un simple effet visuel, par exemple pour décaler légèrement un texte dans un logo ou une puce sans lien avec une notation, un usage qui trompe les technologies d'assistance sans apporter le moindre bénéfice de sens.
Pour des formules chimiques ou mathématiques longues et complexes, comparez toujours avec <math>, un langage de balisage dédié aux notations mathématiques élaborées : <sub> et <sup> suffisent pour un indice ou un exposant isolé, mais deviennent vite limités face à une équation à plusieurs niveaux.
Questions fréquentes
Peut-on utiliser <sub> pour décaler légèrement une icône ou un logo ?
Non, ce n'est pas le rôle de cette balise. Un tel ajustement purement visuel relève de la propriété CSS vertical-align ou d'une transformation, appliquée à l'élément concerné plutôt qu'à une balise censée porter un sens précis.
Faut-il utiliser <sub> pour une note de bas de page appelée dans le texte ?
Non, ce renvoi se marque plutôt avec <sup>, l'exposant, puisque les appels de note s'affichent traditionnellement en chiffre surélevé plutôt qu'abaissé. <sub> reste réservé aux indices, dans les formules chimiques et les notations mathématiques.
Le contenu d'un <sub> reste-t-il lisible si le style CSS de la page est désactivé ?
Oui, et c'est exactement l'intérêt de la balise. Même sans aucune feuille de style, le navigateur applique son propre rendu par défaut pour l'indice, ce qui garantit que la formule ou la notation reste compréhensible dans n'importe quel contexte, contrairement à un simple décalage géré uniquement par le CSS du site.