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

Catégories de contenu Contenu de flux, contenu phrasé, contenu tangible.
Contenu autorisé Contenu phrasé.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu phrasé.
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'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 :

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

HTML

<p>
  Texte normal.
  <samp>Extrait de texte produit par un programme.</samp>
  Texte normal.
</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 l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.

HTML

<pre>
<samp><span class="prompt">jean@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd>
MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022

<span class="prompt">jean@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 par l'utilisateur dans l'invite.

CSS

Voici la feuille de style que nous utilisons :

.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

Spécification État Commentaires
HTML Living Standard
La définition de '<samp>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<samp>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<samp>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui1 Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui4 Oui Oui Oui

Notes

On peut appliquer une règle CSS sur le sélecteur samp afin de remplacer la police de caractère par défaut du navigateur.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, louuis, tregagnon
Dernière mise à jour par : SphinxKnight,