<samp> : l'élément d'échantillon en sortie

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <samp> est un élément qui permet de représenter un résultat produit par un programme informatique en incise dans du texte. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).

Exemple interactif

Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune omission
Parents autorisés Tout élément acceptant du contenu phrasé.
Rôle ARIA implicite Aucun rôle correspondant
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLElement

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments <samp>. On rappelle ici que les préférences de l'utilisatrice ou de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.

Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :

css
samp {
  font-family: "Courier";
}

Note : S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser <output> plutôt que <samp>.

Exemples

Exemple simple

Dans cet exemple simple, un paragraphe contient une mention d'un résultat d'un programme.

HTML

html
<p>
  Lorsque le traitement est terminé, l'outil affichera le texte
  <samp>Scan terminé. <em>N</em> résultats trouvés</samp>. Vous pourrez alors
  passer à l'étape suivante.
</p>

Résultat

Sortie incluant une entrée utilisateur

Il est possible d'imbriquer un élément <kbd> dans un bloc <samp> afin de représenter un fragment de texte saisi par la personne. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.

HTML

html
<pre>
<samp><span class="prompt">jeanne@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd>

MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022

<span class="prompt">jeanne@internets:~$</span> <span class="cursor">█</span></samp>
</pre>

On notera l'utilisation de <span> qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de <kbd> afin de représenter la commande saisie dans l'invite.

CSS

Voici la feuille de style que nous utilisons :

css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}

Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.

Résultat

Spécifications

Specification
HTML Standard
# the-samp-element

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi