I tag: <pre>, <code>, <kbd>, <samp>, <var>

Scrivere «premi Ctrl+C, poi digita npm install, vedrai comparire added 42 packages» in un tutorial tecnico mescola tre cose diverse: un tasto, un comando digitato, un output del terminale. HTML ha un tag per ciascuna, e uno che li racchiude tutti preservando gli spazi.

1. <pre>: il testo preformattato, spazi e a capo intatti

<pre> rappresenta testo che va presentato esattamente come scritto nel file HTML, spazi multipli e ritorni a capo restano tutti, senza che il browser li «schiacci» come farebbe normalmente. È un elemento di blocco, tipicamente reso con un font monospace.

<pre> function saluta() { return "ciao"; } </pre>

Una nota tecnica: se subito dopo il tag di apertura c'è un a-capo, il primo viene automaticamente eliminato dal parser, un dettaglio da conoscere se il tuo blocco sembra avere una riga vuota in più.

Fonte: MDN Web Docs — «<pre>»: il contenuto testuale è mostrato esattamente come scritto; se il primo carattere dopo il tag di apertura è un a-capo, viene rimosso dal parser HTML.

2. <code>: il contenitore semantico per il codice

<code> segnala che il testo racchiuso è codice, non solo testo formattato in monospace per estetica. Per un breve riferimento inline basta usarlo da solo; per un blocco di più righe, si combina con <pre>: quest'ultimo preserva la formattazione, <code> dichiara che è codice.

<p>
   Usa <code>Array.isArray()</code> per verificarlo.
</p> 
<pre>
   <code> const numeri = [1, 2, 3]; numeri.map(n => n * 2); </code>
</pre>

Fonte: MDN Web Docs — «Advanced text features»: <code> marca codice informatico; combinato con <pre> per blocchi multilinea preservando la formattazione.

3. <kbd>: quello che l'utente digita (o pronuncia)

<kbd> rappresenta testo inserito dall'utente, da tastiera, voce, o qualunque dispositivo di input. Per convenzione i browser lo mostrano in monospace, ma non è imposto dallo standard.

<p>
   Premi <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> per ricaricare.
</p>

Il manuale descrive combinazioni precise con <samp>: annidare <kbd> dentro <samp> rappresenta un input restituito dal sistema (eco a schermo di ciò che hai digitato); annidare <samp> dentro <kbd> rappresenta invece un input scelto da un'opzione mostrata a schermo: un nome di menu o di pulsante.

<p>
   Se c'e' un errore di sintassi, il tool ripete il comando digitato:
</p> 
<samp>
   <kbd>custom-git ad my-new-file.cpp</kbd>
</samp>

Fonte: MDN Web Docs — «<kbd>»: rappresenta input testuale da tastiera, voce o altro dispositivo; annidato con <samp> per rappresentare input echeggiato dal sistema o basato su opzioni a schermo.

4. <samp>: l'output di un programma

<samp> racchiude un output di esempio prodotto da un programma o sistema: messaggi d'errore, righe stampate a schermo.

<p>
  Il computer ha mostrato: <samp>Keyboard not found. Press F1 to continue</samp>
</p>

Attenzione a non confonderlo con <output> che va usato per contenuti generati dinamicamente dal JavaScript della tua pagina, <samp> è per esempi statici scritti nel markup.

Fonte: MDN Web Docs — «<samp>»: rappresenta output di esempio; per contenuti generati dinamicamente da script, usare invece <output>.

5. <var>: una variabile, di programmazione o matematica

<var> marca un nome di variabile, sia in un contesto di codice, sia in un'espressione matematica.

<p>
    <var>para</var> rappresenta un elemento paragrafo nell'esempio JavaScript.
</p>

<p>
    L'area di un cerchio e' <var>π</var><var>r</var><sup>2</sup>.
</p>

In sintesi

Non sono sinonimi con stili diversi: ciascuno dichiara chi ha generato quel testo: tu, l'utente, o il programma. Usarli correttamente rende una documentazione tecnica leggibile anche da chi non vede lo schermo, e più facile da stilizzare in modo coerente con il solo CSS.