Elementi HTML per il codice informatico
Scopri gli elementi HTML code, kbd, samp, var e pre: il significato semantico di ciascuno, quando usarli e il pattern per blocchi di codice su più righe.
HTML offre una piccola famiglia di elementi per contrassegnare il testo proveniente da un computer: codice sorgente, testo digitato, output di programmi e variabili. Tutti vengono visualizzati con un carattere a spaziatura fissa per impostazione predefinita, ma non sono intercambiabili — ognuno porta un significato diverso. Scegliere quello giusto comunica a browser, motori di ricerca e soprattutto agli screen reader che tipo di testo informatico stanno leggendo.
Questa pagina spiega quando e come usare ciascun elemento:
<code>— un frammento di codice informatico<kbd>— testo che l'utente digita sulla tastiera<samp>— output di esempio prodotto da un programma<var>— una variabile o un segnaposto<pre>— testo preformattato che conserva spazi e interruzioni di riga- Il pattern canonico
<pre><code>per blocchi di codice su più righe
Perché la semantica è importante
Poiché questi tag appaiono quasi identici sullo schermo, è facile scegliere quello che si ricorda meglio. Bisogna resistere a questa tentazione. Lo stile visivo è solo un'impostazione predefinita — può essere modificato con CSS in qualsiasi momento. Quello che non è possibile cambiare altrettanto facilmente è il significato.
Uno screen reader può annunciare in modo diverso il contenuto di <kbd> e <samp>, i motori di ricerca usano il markup per comprendere una pagina e gli altri sviluppatori che leggono il tuo HTML si affidano a questi tag per sapere se Ctrl + C è una combinazione di tasti (<kbd>) o una stringa stampata dal programma (<samp>). Usa l'elemento che corrisponde al significato, poi applicagli lo stile che preferisci.
Il tag HTML <code>
Il tag HTML <code> contrassegna inline un frammento di codice informatico — il nome di una funzione, un tag, una proprietà CSS, un comando shell e così via. Non significa "variabile"; per le variabili usa <var>. I browser visualizzano il contenuto di <code> con un carattere a spaziatura fissa.
Da solo, <code> è pensato per snippet brevi e inline. Per blocchi su più righe, incorporarlo in <pre> (vedi sotto).
Esempio del tag HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>Il tag HTML <var>
Il tag <var> definisce una variabile in un'espressione matematica o in un contesto di programmazione — ad esempio x e y in un'equazione, o il nome di un parametro nel testo. È l'elemento corretto per le variabili (un punto di confusione comune con <code>). I browser di solito lo rendono in corsivo.
Esempio del tag HTML <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>Il tag HTML <kbd>
Il tag <kbd> contrassegna l'input da tastiera — testo o tasti che l'utente deve digitare o premere. Usalo per le scorciatoie (Ctrl + V), i comandi che il lettore deve inserire e i singoli tasti. Viene visualizzato con un carattere a spaziatura fissa per impostazione predefinita.
Esempio del tag HTML <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>Il tag HTML <samp>
Il tag <samp> contrassegna l'output di esempio prodotto da un programma o script — il testo che il programma restituisce, al contrario del codice stesso (<code>) o di ciò che si digita (<kbd>). Viene visualizzato con un carattere a spaziatura fissa per impostazione predefinita.
Un modo utile per ricordare la differenza: <kbd> è ciò che entra, <samp> è ciò che esce.
Esempio del tag HTML <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>Il tag HTML <pre>
Il tag <pre> definisce il testo preformattato. A differenza del normale HTML, il browser conserva ogni spazio, tabulazione e interruzione di riga esattamente come scritto nel sorgente, e visualizza il contenuto con un carattere a spaziatura fissa. Questo rende <pre> ideale per l'ASCII art, le tabelle a larghezza fissa e — nella maggior parte dei casi — i blocchi di codice in cui indentazione e interruzioni di riga devono essere preservate.
Da solo, <pre> non porta il significato "questo è codice"; controlla solo la formattazione. Per esprimere che il testo preformattato è codice, combinalo con <code>.
Esempio del tag HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Blocchi di codice su più righe con <pre> e <code>
Per un blocco di codice sorgente che si estende su più righe, il pattern canonico e consigliato è di annidare <code> all'interno di <pre>. <pre> preserva gli spazi e le interruzioni di riga; <code> aggiunge il significato semantico che il contenuto è codice. Insieme rappresentano il modo standard per visualizzare un blocco di codice in HTML.
Esempio di <pre> con <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Nota che il contenuto di <code> inizia immediatamente dopo il tag di apertura e termina immediatamente prima del tag di chiusura. Qualsiasi spazio o interruzione di riga lasciata tra <pre> e <code> verrebbe anch'essa visualizzata, poiché <pre> conserva tutti gli spazi.
Scegliere l'elemento giusto
| Elemento | Significato | Uso tipico |
|---|---|---|
<code> | Un frammento di codice | Il nome inline di una funzione, un tag o un comando |
<kbd> | Input da tastiera | Scorciatoie e testo digitato dall'utente |
<samp> | Output di esempio di un programma | Testo restituito da un programma |
<var> | Una variabile | x in un'equazione, il nome di un parametro |
<pre> | Testo preformattato | Blocchi su più righe; preserva gli spazi |