Balise HTML <sub>
La balise <sub> est utilisée pour définir un texte en indice qui apparaît à mi-caractère en dessous de la ligne et est rendu dans une police plus petite. Le texte en indice est souvent utilisé pour définir des formules chimiques.
Vous devez utiliser la balise <sub> uniquement pour des raisons typographiques. Elle ne doit pas être utilisée à des fins de style. Si vous souhaitez modifier la position verticale d'un texte, vous pouvez utiliser la CSS vertical-align avec la valeur "sub".
TIP
Pour définir un texte en exposant, utilisez la balise <sup>.
Syntaxe
La balise <sub> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<sub>) et la balise de fermeture (</sub>).
Exemple de la balise HTML <sub> :
Balise HTML <sub>
<!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>O</p>
</body>
</html>Résultat
Exemple de la balise HTML <sub> utilisée avec la balise <sup> :
Exemple de la balise HTML <sub> avec la balise <sup> :
<!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>O
</p>
<p>
E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light.
</p>
</body>
</html>Exemple de la balise HTML <sub> utilisée avec la propriété CSS vertical-align :
Exemple de la balise HTML <sub> avec la propriété CSS vertical-align :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
sub {
vertical-align: sub;
font-size: small;
}
</style>
</head>
<body>
<h1>Example of the sub tag</h1>
<p>
Here is some text <sub>with the sub tag</sub>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
</p>
<p>
Reference site about Lorem Ipsum,<sub> giving information on its origins</sub>, as well as a random Lipsum generator.
</p>
</body>
</html>Attributs
La balise <sub> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <sub>
sub {
color: #555;
font-size: 0.8em;
}Remarque : cet exemple remplace le style par défaut du navigateur à des fins de démonstration.
Pratique
Quelle est l'utilisation et la syntaxe correctes de la balise HTML <sub> selon le guide w3docs.com ?