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

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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `<code>`
* `<kbd>`
* `<pre>`
* `<output>`