1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: '<samp> : l''élément d''échantillon produit'
slug: Web/HTML/Element/samp
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/samp
---
{{HTMLRef}}
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).
{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
## Attributs
Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/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 :
```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 {{HTMLElement("output")}} plutôt que `<samp>`.
## Exemples
### Exemple simple
#### HTML
```html
<p>
Texte normal.
<samp>Extrait de texte produit par un programme.</samp>
Texte normal.
</p>
```
#### Résultat
{{EmbedLiveSample("Exemples")}}
### Sortie incluant une entrée utilisateur
Il est possible d'imbriquer un élément {{HTMLElement("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
```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 {{HTMLElement("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 :
```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
{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}
## Résumé technique
<table class="properties">
<tbody>
<tr>
<th scope="row">
<dfn
><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
>Catégories de contenu</a
></dfn
>
</th>
<td>
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
>Contenu de flux</a
>,
<a
href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
>contenu phrasé</a
>,
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
>contenu tangible</a
>.
</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
<a
href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
>Contenu phrasé</a
>.
</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>
Tout élément acceptant du
<a
href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
>contenu phrasé</a
>.
</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML5 W3C')}} | |
| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} | {{Spec2('HTML4.01')}} | |
## Compatibilité des navigateurs
{{Compat("html.elements.samp")}}
## 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
- {{HTMLElement("code")}}
- {{HTMLElement("kbd")}}
- {{HTMLElement("pre")}}
- {{HTMLElement("output")}}
|
