Dans un tutoriel technique, une phrase mentionne au passage le nom d'une fonction ou d'un fichier : « appelez ensuite fetch pour récupérer les données ». Ce mot se perd dans la phrase, sans rien qui le distingue du reste du texte alors qu'il désigne quelque chose de très précis, un élément de code.
<code> résout ce problème : il marque un fragment de code informatique, court comme un nom de fonction ou long comme un bloc entier, et l'affiche dans une police à chasse fixe qui le distingue immédiatement du texte qui l'entoure.
Définition
<code> désigne un fragment de code informatique : un nom de variable, un nom de fichier, une commande, une syntaxe, ou un bloc de code complet. C'est un élément en ligne par défaut, ce qui veut dire qu'il s'insère au fil d'une phrase sans créer de nouveau bloc, contrairement à <pre> qui, lui, forme toujours un bloc à part.
Syntaxe et usage en ligne
Utilisé seul, <code> sert à faire ressortir un mot technique au milieu d'une phrase normale, sans rien changer à la structure du texte autour.
<p>
Appelez la fonction <code>fetch</code> pour récupérer les données depuis le
serveur.
</p>Pour un extrait plus long, la convention consiste à l'imbriquer dans un <pre>, qui prend alors en charge la préservation des espaces et des sauts de ligne pendant que <code> continue de porter le sens : ceci est du code.
<code> face à <kbd> et <samp>
Trois balises se ressemblent visuellement, toutes en police à chasse fixe, mais elles ne racontent pas la même histoire. <code> représente le code lui-même, tel qu'il est écrit ou référencé. <kbd> représente ce que l'utilisateur saisit ou une touche qu'il presse. <samp> représente ce que le programme répond en retour.
| Balise | Ce qu'elle représente | Exemple |
|---|---|---|
<code> | Le code lui-même, en référence | Un nom de fonction dans une phrase |
<kbd> | Ce que l'utilisateur tape ou appuie | Une commande saisie, un raccourci clavier |
<samp> | Ce que le programme répond | Un message de sortie, une erreur affichée |
Une transcription de terminal illustre bien les trois rôles réunis : la commande saisie par la personne, puis la réponse renvoyée par le programme.
<pre>
<kbd>npm install</kbd>
<samp>added 42 packages in 3s</samp>
</pre>La coloration syntaxique n'est pas automatique
Poser une classe comme language-html ou language-python sur <code> ne colore rien à elle seule.
La classe language-xxx est une convention utilisée par des bibliothèques JavaScript de coloration syntaxique, comme Prism ou highlight.js, pour savoir quel langage tokeniser et colorer. Sans ce script chargé sur la page, la classe reste un simple mot posé sur la balise, sans aucun effet visuel de la part du navigateur seul. La coloration est donc un ajout, jamais un comportement natif de <code>.
Bonnes pratiques
Utilisez <code> en ligne pour tout mot technique mentionné dans une phrase, et imbriqué dans <pre> pour un bloc entier. Réservez-le à du contenu réellement informatique au sens large, noms de fichiers et de commandes compris, plutôt qu'à un simple effet de style monospace que la feuille de style peut produire seule sans rien signifier.
Questions fréquentes
Un extrait en ligne avec <code> peut-il déborder si la phrase est longue ?
Non, utilisé seul et en ligne dans un paragraphe, <code> suit le comportement normal du texte : il retourne à la ligne comme n'importe quel mot. Seul <pre> impose l'absence de retour à la ligne automatique, pas <code> employé isolément.
Faut-il ajouter une classe language-xxx même pour un mot de code isolé dans une phrase ?
En général non, la coloration syntaxique cible surtout des blocs plus longs à l'intérieur d'un <pre>. Un mot isolé se contente le plus souvent de la police monospace par défaut, sans coloration particulière, et ajouter la classe n'apporte alors presque rien.
Peut-on utiliser <code> pour un nom de fichier ou une commande, pas seulement pour du code exécutable ?
Oui, la définition couvre largement tout ce qui relève du registre informatique : noms de fichiers, de variables, de balises HTML, de commandes, pas uniquement du code source formel dans un langage de programmation précis.