Balise HTML <code>
La balise <code> sert à insérer des lignes de code. Description de la balise, de ses attributs et exemples d'utilisation.
La balise <code> sert à marquer un fragment de code informatique — un nom de variable, un appel de fonction, un extrait de code source ou tout texte qu'un utilisateur est censé saisir ou lire comme du code. Dans le navigateur, le contenu est affiché dans une police à chasse fixe (une police dans laquelle tous les caractères ont la même largeur). La balise <code> est un élément en ligne par défaut.
La balise <code> est sémantique : elle indique aux navigateurs, aux technologies d'assistance et aux moteurs de recherche que le texte qu'elle encadre est du code, pas de la prose. C'est cette signification qui justifie son utilisation — le style à chasse fixe n'est que la présentation par défaut, que vous pouvez remplacer avec CSS.
Cette page explique comment <code> se comporte seul, pourquoi le code multilignes doit être encapsulé dans <pre>, le piège de l'échappement HTML que vous rencontrerez en essayant d'afficher des chevrons, la convention des surligneurs de syntaxe et quand ne pas utiliser <code> du tout.
Syntaxe
La balise <code> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<code>) et la balise fermante (</code>).
Exemple de la balise HTML <code> :
Balise HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Lancez l'exemple ci-dessus avec l'éditeur Try it : le texte <code> s'affiche sur la même ligne que les paragraphes environnants, rendu dans une police à chasse fixe, exactement comme tout autre élément en ligne.
Pourquoi <code> seul réduit les espaces blancs
Comme la plupart des éléments HTML, <code> suit les règles normales d'espacement : les suites d'espaces, de tabulations et de sauts de ligne sont réduites à un seul espace. C'est acceptable pour un jeton unique (<code>let x = 10;</code>), mais cela pose problème dès que vous collez un extrait multilignes :
<code>
function greet(name) {
return "Hello, " + name;
}
</code>Dans le navigateur, cela s'affiche sur une seule ligne — function greet(name) { return "Hello, " + name; } — car chaque saut de ligne et l'indentation sont réduits à des espaces simples.
Pour conserver les sauts de ligne et l'indentation, encapsulez le <code> dans un élément <pre> (« préformaté »). <pre> conserve les espaces tels qu'ils ont été écrits, et le <code> à l'intérieur maintient le sens sémantique. <pre><code>…</code></pre> est l'association standard pour tout bloc de code de plus d'une ligne.
Exemple de la balise HTML <code> placée dans une balise HTML <pre> :
Exemple de la balise HTML <code> dans une balise HTML <pre> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Échapper <, > et & dans <code>
Une tâche très courante consiste à afficher du HTML lui-même dans un bloc <code> — mais le navigateur ne sait pas que votre <div> est destiné à être affiché plutôt qu'exécuté. Si vous écrivez un < ou > littéral, le navigateur tente de le parser comme une balise et votre exemple disparaît silencieusement. Il en va de même pour &, qui introduit une référence de caractère.
Vous devez remplacer ces caractères par leurs entités HTML :
| Caractère | Entité | Signification |
|---|---|---|
< | < | inférieur à |
> | > | supérieur à |
& | & | esperluette |
Ainsi, pour afficher le texte <a href="#">, vous écrivez en réalité :
<code><a href="#"></code>Et pour afficher if (a && b) :
<code>if (a && b)</code>Oublier d'échapper & est le bug le plus subtil : © s'affichera comme le symbole © au lieu du texte littéral. En cas de doute, échappez chaque <, > et &.
Exemple de la balise HTML <code> avec des propriétés CSS :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>La classe language-* pour les surligneurs de syntaxe
La balise <code> seule n'a aucune notion du langage de programmation qu'elle contient, elle ne peut donc pas coloriser les mots-clés, les chaînes et les commentaires par elle-même. Les bibliothèques de surligneur de syntaxe comme Prism et highlight.js résolvent ce problème grâce à une convention de nom de classe : vous ajoutez une classe language-<name> à l'élément <code> (généralement dans un <pre>), et la bibliothèque parcourt la page, lit la classe et applique les bonnes couleurs.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Ici, language-js indique au surligneur de traiter le contenu comme du JavaScript. Les autres valeurs courantes sont language-css, language-html et language-python. La classe est purement informative pour le surligneur — l'élément <code> conserve toujours son sens sémantique même si aucun surligneur n'est chargé. (Notez le => dans l'extrait ci-dessus : même dans un bloc surligné, vous devez toujours échapper > pour que la fonction fléchée s'affiche correctement.)
Quand ne pas utiliser <code>
<code> est destiné au contenu qui est réellement du code. Ne l'utilisez pas simplement parce que vous voulez une police à chasse fixe :
- Saisie clavier que l'utilisateur doit presser → utilisez
<kbd>, p. ex.<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Sortie de programme / exemples de résultats → utilisez
<samp>. - Une variable ou un espace réservé en mathématiques ou dans la prose → utilisez
<var>. - Texte à chasse fixe purement décoratif sans signification de code → utilisez un
<span>et stylisez-le avec CSS. Utiliser<code>ici est trompeur pour les lecteurs d'écran et les moteurs de recherche.
Choisir le bon élément garantit l'honnêteté de votre balisage : la balise décrit ce qu'est le texte, tandis que CSS décide de son apparence.
Balises associées
<pre>— préserve les espaces blancs ; encapsulez<code>dedans pour les blocs multilignes.<kbd>— saisie clavier de l'utilisateur.<samp>— exemple de sortie d'un programme.<var>— un nom de variable ou d'espace réservé.
Attributs
La balise <code> prend en charge les attributs globaux et les attributs d'événement.
Par exemple, vous pouvez utiliser l'attribut title pour ajouter une info-bulle : <code title="Variable declaration">let x = 10;</code>.