Balise HTML <var>
La balise <var> décrit une variable dans une expression mathématique ou un contexte de programmation. Voir des exemples.
La balise <var> décrit une variable dans une expression mathématique ou un contexte de programmation. Son contenu est généralement affiché en italique dans la police de caractères courante.
Parmi les autres éléments utilisés pour décrire les parties techniques des documents dans les contextes où <var> est généralement employé, on trouve :
- la balise
<code>qui définit un fragment de code informatique, - la balise
<samp>qui définit la sortie d'exemple d'un script ou d'un programme informatique, - la balise
<kbd>qui définit la saisie clavier.
Si la balise <var> est utilisée par erreur à des fins stylistiques plutôt que sémantiques, vous devez utiliser soit un <span> avec le CSS approprié, soit une balise sémantique adaptée parmi les suivantes : <q>, <em>, <i>.
La balise <var> n'est pas obsolète, mais vous pouvez obtenir de meilleurs effets avec CSS.
Syntaxe
La balise <var> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<var>) et la balise fermante (</var>).
Exemple de la balise HTML <var> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Example <var>This is a variable</var>
</body>
</html>Quand utiliser <var>
Utilisez <var> pour le nom d'une variable — un espace réservé qui représente une valeur. Elle s'adapte à deux contextes :
- Expressions mathématiques. Les lettres qui représentent des quantités inconnues ou variables, comme
xetydans une équation. - Programmation. Le nom d'une variable référencée en prose, comme
countouuserName.
Il est facile de confondre <var> avec les balises sémantiques voisines. Choisissez en fonction du sens, pas de l'apparence du texte :
| Balise | Utilisation | Exemple |
|---|---|---|
<var> | Un nom de variable ou un espace réservé | « Soit n le nombre d'utilisateurs. » |
<code> | Un fragment de code informatique | « Appelez getName() pour le lire. » |
<i> | Texte mis en valeur pour des raisons non sémantiques (une expression étrangère, une pensée) | « la sonde Voyager » |
Si vous souhaitez uniquement un style italique sans signification particulière, préférez <i> ou un <span> stylisé plutôt que <var>.
Exemple : variables dans une équation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The equation <var>x</var> + <var>y</var> = 10 has many solutions.</p>
<p>If <var>x</var> is 4, then <var>y</var> must equal 6.</p>
</body>
</html>Styliser la balise <var> avec CSS
Les navigateurs affichent <var> en italique par défaut. Comme il s'agit d'un véritable élément sémantique, vous pouvez le restyliser librement sans en modifier la signification — par exemple, supprimer l'italique et donner aux variables une couleur distincte pour qu'elles ressortent dans le texte technique :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
var {
font-style: normal;
font-family: monospace;
color: #0d6efd;
font-weight: 600;
}
</style>
</head>
<body>
<p>Solve for <var>x</var> when <var>y</var> = 12.</p>
</body>
</html>Accessibilité
L'élément <var> n'a pas de rôle ARIA implicite, donc les technologies d'assistance n'annoncent pas son contenu comme une « variable » — pour un lecteur d'écran, le texte se lit de la même façon que le texte environnant. L'élément communique du sens aux auteurs et aux outils de mise en forme, pas directement aux utilisateurs. Assurez-vous que le rôle de la variable est clair d'après le libellé environnant afin que la phrase reste compréhensible lorsqu'elle est lue à voix haute.
Attributs
La balise <var> prend en charge les attributs globaux et les attributs d'événement.