Éléments HTML pour le code informatique
Découvrez les éléments HTML code, kbd, samp, var et pre : leur sens sémantique, quand les utiliser et le motif multi-lignes avec pre et code.
HTML propose une petite famille d'éléments pour baliser du texte provenant d'un ordinateur : code source, saisies clavier, sorties de programme et variables. Ils s'affichent tous par défaut en police à chasse fixe, mais ils ne sont pas interchangeables — chacun porte un sens différent. Choisir le bon élément indique aux navigateurs, aux moteurs de recherche et surtout aux lecteurs d'écran quel type de texte informatique ils ont sous les yeux.
Cette page explique quand et comment utiliser chaque élément :
<code>— un fragment de code informatique<kbd>— du texte que l'utilisateur saisit au clavier<samp>— un exemple de sortie d'un programme<var>— une variable ou un espace réservé<pre>— du texte préformaté qui conserve les espaces et les sauts de ligne- Le motif canonique
<pre><code>pour les blocs de code multi-lignes
Pourquoi la sémantique est importante
Ces balises ayant un aspect presque identique à l'écran, la tentation est de choisir celle dont on se souvient. Résistez-y. Le style visuel n'est qu'un défaut — vous pouvez le modifier avec CSS à tout moment. Ce que vous ne pouvez pas changer aussi facilement, c'est le sens.
Un lecteur d'écran peut annoncer le contenu <kbd> et <samp> différemment, les moteurs de recherche utilisent le balisage pour comprendre une page, et les autres développeurs qui lisent votre HTML s'appuient sur ces balises pour savoir si Ctrl + C est une combinaison de touches (<kbd>) ou une chaîne affichée par le programme (<samp>). Utilisez l'élément qui correspond au sens, puis stylisez-le comme vous le souhaitez.
La balise HTML <code>
La balise HTML <code> marque un fragment de code informatique en ligne — un nom de fonction, une balise, une propriété CSS, une commande shell, etc. Elle ne signifie pas « variable » ; pour les variables, utilisez <var>. Les navigateurs affichent le contenu de <code> en police à chasse fixe.
À elle seule, <code> est destinée aux extraits courts et en ligne. Pour les blocs multi-lignes, enveloppez-la dans <pre> (voir ci-dessous).
Exemple de la balise HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>La balise HTML <var>
La balise <var> définit une variable dans une expression mathématique ou un contexte de programmation — par exemple x et y dans une équation, ou le nom d'un paramètre en prose. C'est l'élément correct pour les variables (source courante de confusion avec <code>). Les navigateurs l'affichent généralement en italique.
Exemple de la balise HTML <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>La balise HTML <kbd>
La balise <kbd> marque la saisie clavier — le texte ou les touches que l'utilisateur est censé saisir ou presser. Utilisez-la pour les raccourcis (Ctrl + V), les commandes que le lecteur doit entrer et les touches individuelles. Elle s'affiche par défaut en police à chasse fixe.
Exemple de la balise HTML <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>La balise HTML <samp>
La balise <samp> marque un exemple de sortie d'un programme ou d'un script informatique — le texte que le programme affiche en retour, par opposition au code lui-même (<code>) ou à ce que vous tapez (<kbd>). Elle s'affiche par défaut en police à chasse fixe.
Un bon moyen de retenir la différence : <kbd> correspond à ce qui entre, <samp> à ce qui sort.
Exemple de la balise HTML <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>La balise HTML <pre>
La balise <pre> définit du texte préformaté. Contrairement au HTML normal, le navigateur conserve chaque espace, tabulation et saut de ligne exactement tels qu'ils sont écrits dans la source, et affiche le contenu en police à chasse fixe. <pre> est donc idéale pour l'art ASCII, les tableaux à largeur fixe et — le plus souvent — les blocs de code où l'indentation et les sauts de ligne doivent être préservés.
Seule, <pre> ne porte aucun sens de « c'est du code » ; elle ne contrôle que le formatage. Pour exprimer que le texte préformaté est du code, combinez-la avec <code>.
Exemple de la balise HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Blocs de code multi-lignes avec <pre> et <code>
Pour un bloc de code source couvrant plusieurs lignes, le motif canonique et recommandé consiste à imbriquer <code> dans <pre>. <pre> préserve les espaces et les sauts de ligne ; <code> ajoute le sens sémantique indiquant que le contenu est du code. Ensemble, ils constituent la méthode standard pour afficher un bloc de code en HTML.
Exemple de <pre> avec <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Notez que le contenu de <code> commence immédiatement après la balise ouvrante et se termine immédiatement avant la balise fermante. Tout espace ou saut de ligne laissé entre <pre> et <code> serait également rendu, puisque <pre> préserve tous les espaces.
Choisir le bon élément
| Élément | Signification | Utilisation typique |
|---|---|---|
<code> | Un fragment de code | Un nom de fonction, une balise ou une commande en ligne |
<kbd> | Saisie clavier | Raccourcis et texte que l'utilisateur saisit |
<samp> | Exemple de sortie de programme | Texte affiché par un programme |
<var> | Une variable | x dans une équation, un nom de paramètre |
<pre> | Texte préformaté | Blocs multi-lignes ; préserve les espaces |