Balise HTML <sub>
La balise <sub> définit le texte en indice affiché en dessous de la ligne de base dans une police plus petite. Exemples et syntaxe inclus.
La balise HTML <sub> marque le texte en indice — des caractères positionnés à mi-ligne en dessous de la ligne de base et affichés dans une police légèrement plus petite. C'est un élément en ligne et sémantique : il indique au navigateur (et aux technologies d'assistance) que le texte inclus est un indice, et pas seulement qu'il doit sembler abaissé.
Utilisez <sub> uniquement lorsque la position abaissée porte une signification typographique. Ce n'est pas un outil générique pour « rendre ce texte plus petit et plus bas » — si vous souhaitez uniquement l'effet visuel sans la signification, utilisez plutôt CSS (détaillé ci-dessous).
Quand utiliser <sub>
Un indice est pertinent dans plusieurs contextes :
- Formules chimiques — le nombre d'atomes : H2O, CO2, C2H5OH.
- Indices mathématiques — termes de suites et indices de variables : x1, x2, …, an.
- Bases de logarithmes — log2(n), log10(x).
- Marqueurs de notes de bas de page / références qui, par convention, sont composés en position basse plutôt que haute.
Dans chaque cas, l'indice modifie le sens du texte environnant : CO2 et CO<sub>2</sub> se lisent différemment. Cette différence sémantique est exactement ce que <sub> existe pour exprimer — et c'est pourquoi le stylage CSS seul ne peut pas le remplacer.
Pour définir un texte en exposant (élevé au-dessus de la ligne de base, par exemple des puissances comme x2 ou des ordinaux comme 1er), utilisez la balise <sup>.
<sub> vs <sup>
Les deux sont des éléments typographiques sémantiques ; ils ne diffèrent que par leur direction et les conventions qui régissent l'utilisation correcte de chacun.
<sub> (indice) | <sup> (exposant) | |
|---|---|---|
| Position | En dessous de la ligne de base | Au-dessus de la ligne de base |
| Utilisations typiques | Nombre d'atomes (H2O), indices mathématiques (xn), bases de logarithmes | Puissances (x2), ordinaux (2nd), marqueurs de notes |
| Lecture | « x indice n » | « x à la puissance n », « 2ème » |
Choisissez l'élément qui correspond à la convention établie pour la notation, et non celui qui « semble juste » — un nombre d'atomes chimiques est toujours un indice, un exposant est toujours un exposant.
Syntaxe
La balise <sub> fonctionne par paires. Le contenu en indice est écrit entre la balise ouvrante <sub> et la balise fermante </sub>.
<p>Formula of water — H<sub>2</sub>O</p>Exemples
Formules chimiques
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Formula of water - H<sub>2</sub>O, formula of alcohol - C<sub>2</sub>H<sub>5</sub>OH</p>
</body>
</html><sub> avec <sup>
Les indices et les exposants apparaissent souvent dans le même document — l'un pour les nombres d'atomes chimiques, l'autre pour les puissances :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
The formula of water is H<sub>2</sub>O, and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>OH
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Si vous souhaitez uniquement l'effet visuel, utilisez CSS
Si un texte doit ressembler à un indice sans l'être sémantiquement, n'abusez pas de <sub>. Appliquez plutôt CSS vertical-align avec la valeur sub (ainsi qu'une font-size plus petite) à l'élément approprié. L'exemple ci-dessous restylise du texte ordinaire à des fins purement présentationnelles — notez qu'aucun élément <sub> n'est utilisé :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.lowered {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Lowered text without the sub tag</h1>
<p>
Here is some <span class="lowered">visually lowered</span> text.
</p>
</body>
</html>Accessibilité
Les lecteurs d'écran n'annoncent pas les indices de manière cohérente — certains lisent H<sub>2</sub>O comme « H deux O » sans indiquer que le 2 est abaissé, d'autres font une pause ou changent de tonalité, et beaucoup ignorent entièrement la distinction. Étant donné que la position peut porter une signification perdue à l'oral, préférez une source claire et non ambiguë pour les notations importantes :
- Pour les formules et équations complexes, envisagez de fournir une alternative en texte brut ou adaptée à la lecture orale (par exemple, écrire « log base 2 de n » dans le texte adjacent, ou utiliser MathML pour un balisage mathématique réel).
- Ne comptez pas sur
<sub>seul pour transmettre quelque chose qu'un lecteur doit comprendre — assurez-vous que la phrase environnante reste correcte lorsque l'indice est annoncé sans distinction.
Attributs
La balise <sub> prend en charge les attributs globaux et les attributs d'événements. Elle ne possède pas d'attributs propres.
Mise en forme de <sub>
Les navigateurs appliquent par défaut une police plus petite et une position abaissée à <sub>. Vous pouvez ajuster son apparence avec CSS tout en préservant la signification de l'élément :
sub {
color: #555;
font-size: 0.8em;
}Remarque : ceci remplace le style par défaut de <sub> dans le navigateur à des fins de démonstration uniquement — la signification d'indice reste inchangée.