Tag HTML <samp>
Il tag HTML <samp> è un elemento inline che segna l'output campione di un programma o sistema. Scopri come usarlo con esempi W3Docs.
Il tag HTML <samp> contrassegna l'output campione di un programma, script o sistema — il testo che un programma restituisce all'utente. Per impostazione predefinita, i browser lo visualizzano con un carattere monospace.
<samp> è un elemento inline di fraseggio, non un elemento a blocco. Scorre all'interno di una riga di testo proprio come <em> o <code>, e non crea un'interruzione di paragrafo né un proprio riquadro. Se devi visualizzare un blocco di output su più righe preservando le interruzioni di riga e la spaziatura, inserisci l'elemento <samp> all'interno di un elemento <pre>.
Quando usare <samp>
<samp> è uno dei vari elementi "tecnici" a carattere monospace, e la differenza tra di essi è semantica, non visiva:
- Usa
<code>per il codice sorgente — il testo che un programmatore scrive. - Usa
<samp>per l'output che un programma produce in risposta. - Usa
<kbd>per l'input da tastiera che l'utente deve digitare. - Usa
<var>per il nome di una variabile o segnaposto.
La regola pratica è: se un utente o un altro programma l'ha digitato, si usa <kbd> o <code>; se il computer l'ha stampato, si usa <samp>.
Se vuoi un contenitore attivo che JavaScript riempia con il risultato di un calcolo, usa invece l'elemento <output> — <samp> serve per rappresentare l'output come testo statico e marcato.
Sintassi
Il tag <samp> è utilizzato in coppia. Il contenuto viene scritto tra il tag di apertura (<samp>) e quello di chiusura (</samp>).
Esempi
Output da riga di comando e terminale
Un uso comune è documentare ciò che un comando stampa. Qui il comando che il lettore digita è racchiuso in <kbd>, e la risposta è racchiusa in <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>Per output su più righe come il log di build sopra, <samp> viene inserito all'interno di <pre>: <pre> preserva gli spazi bianchi e le interruzioni di riga, mentre <samp> aggiunge il significato ("questo è l'output del programma").
Un messaggio di errore dell'applicazione
<samp> è adatto anche per citare il messaggio esatto che un sistema mostra all'utente:
<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> e <var> a confronto
Questo esempio mostra i quattro elementi correlati insieme per confrontare come viene utilizzato ciascuno:
<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>Attributi
Il tag <samp> supporta gli attributi globali e gli attributi evento.
Stile di <samp>
Il carattere monospace predefinito può essere sovrascritto tramite CSS, in genere usando la proprietà font-family — anche se le preferenze del browser o i fogli di stile del user agent potrebbero avere la precedenza. Un pattern comune è assegnare all'output campione uno sfondo sottile per farlo risaltare rispetto al testo circostante:
<!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> non ha una semantica speciale per le tecnologie assistive — i lettori di schermo annunciano il suo testo esattamente come il testo circostante e non dicono "output campione". Il suo valore è per gli autori e per lo stile, non per un ruolo nell'albero di accessibilità. Non fare affidamento solo su <samp> per comunicare che qualcosa è un output; se questa distinzione è importante per il lettore, rendila chiara anche nel testo visibile (come negli esempi sopra con etichette come "l'applicazione mostra:").