Balise HTML <samp>
La balise HTML <samp> est un élément en ligne marquant la sortie d'un programme ou système. Apprenez à l'utiliser avec des exemples W3docs.
La balise HTML <samp> marque la sortie d'un programme informatique, d'un script ou d'un système — le texte qu'un programme affiche à l'utilisateur. Par défaut, les navigateurs restituent son contenu dans une police à chasse fixe.
<samp> est un élément de formulation en ligne, non un bloc. Il s'intègre dans une ligne de texte comme <em> ou <code>, sans créer de saut de paragraphe ni de boîte propre. Si vous avez besoin d'afficher une sortie multi-lignes en préservant les sauts de ligne et les espaces, placez l'élément <samp> à l'intérieur d'un élément <pre>.
Quand utiliser <samp>
<samp> fait partie de plusieurs éléments « techniques » à chasse fixe, et la différence entre eux est sémantique, non visuelle :
- Utilisez
<code>pour le code source — le texte qu'un programmeur écrit. - Utilisez
<samp>pour la sortie qu'un programme produit en réponse. - Utilisez
<kbd>pour la saisie clavier que l'utilisateur est censé taper. - Utilisez
<var>pour un nom de variable ou un espace réservé.
La règle est donc : si un humain ou un autre programme l'a tapé, c'est <kbd> ou <code> ; si l'ordinateur l'a affiché, c'est <samp>.
Si vous souhaitez un conteneur actif que JavaScript remplit avec le résultat d'un calcul, utilisez plutôt l'élément <output> — <samp> sert à représenter une sortie sous forme de texte statique balisé.
Syntaxe
La balise <samp> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<samp>) et la balise fermante (</samp>).
Exemples
Sortie de commande et de terminal
Un usage courant consiste à documenter ce qu'une commande affiche. Ici, la commande que le lecteur tape est entourée de <kbd>, et la réponse est entourée de <samp> :
<!DOCTYPE html>
<html>
<head>
<title>Command output</title>
</head>
<body>
<p>Type <kbd>node --version</kbd> and you will see something like <samp>v20.11.1</samp>.</p>
<p>Full session:</p>
<pre><samp>$ npm run build
> [email protected] build
> next build
✓ Compiled successfully
Done in 4.21s.</samp></pre>
</body>
</html>Pour une sortie multi-lignes comme le journal de compilation ci-dessus, <samp> est placé à l'intérieur de <pre> : <pre> préserve les espaces et les sauts de ligne, tandis que <samp> ajoute le sens (« ceci est une sortie de programme »).
Un message d'erreur d'application
<samp> convient également pour citer le message exact qu'un système affiche à l'utilisateur :
<p>
If the upload fails, the application displays:
<samp>Error 413: Payload too large. Maximum file size is 25 MB.</samp>
</p><samp>, <code>, <kbd> et <var> côte à côte
Cet exemple montre les quatre éléments liés ensemble afin que vous puissiez comparer comment chacun est utilisé :
<p>
Run <code>let total = price * qty;</code> where
<var>price</var> and <var>qty</var> are numbers.
Press <kbd>Enter</kbd> and the console prints
<samp>NaN</samp> if either variable is undefined.
</p>Attributs
La balise <samp> prend en charge les attributs globaux et les attributs d'événement.
Mise en forme de <samp>
La police à chasse fixe par défaut peut être remplacée via CSS, généralement grâce à la propriété font-family — bien que les préférences du navigateur ou les feuilles de style user-agent puissent avoir la priorité. Un schéma courant consiste à donner à la sortie d'exemple un arrière-plan discret pour la distinguer du texte environnant :
<!DOCTYPE html>
<html>
<head>
<style>
samp {
font-family: "Courier New", monospace;
background-color: #f4f4f4;
color: #c7254e;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<p>The server responded with <samp>200 OK</samp>.</p>
</body>
</html>Accessibilité
<samp> ne porte aucune sémantique particulière pour les technologies d'assistance — les lecteurs d'écran annoncent son texte exactement comme le texte environnant et ne précisent pas « sortie d'exemple ». Sa valeur est destinée aux auteurs humains et à la mise en forme, non à un rôle dans l'arbre d'accessibilité. Ne vous fiez pas à <samp> seul pour indiquer qu'un contenu est une sortie ; si cette distinction est importante pour le lecteur, rendez-la explicite dans le texte visible également (comme dans les exemples ci-dessus avec des étiquettes telles que « l'application affiche : »).