Quando si scrive documentazione tecnica o si realizza una guida di programmazione, è importante distinguere chiaramente il normale testo da codice sorgente, variabili, output dei programmi e scorciatoie da tastiera. HTML mette a disposizione alcuni tag specifici proprio per questi casi.
Il tag <code> è il più utilizzato per rappresentare frammenti di codice. Il browser visualizza automaticamente il testo contenuto al suo interno con un carattere a larghezza fissa (monospace), rendendolo più leggibile e facilmente distinguibile dal resto del contenuto.
<code>
function esempio{
variab = 1;
}
</code>
Il tag <code>, però, non mantiene automaticamente gli spazi e le interruzioni di riga presenti nel codice originale. Se desideri visualizzare il testo esattamente come è stato scritto, puoi racchiuderlo anche nel tag preformattato <pre>.
<pre>Il tag <pre> serve a mantenere gli spazi, le tabulazioni e gli a capo presenti nel file HTML. Per questo motivo viene spesso utilizzato insieme a <code> quando si vogliono mostrare blocchi di codice ben formattati.
<pre>
<code>
function esempio{
variab = 1;
}
</code>
</pre>
Quando in un esempio di codice sono presenti valori che possono cambiare, è consigliabile racchiuderli nel tag <var>. Il browser li visualizza normalmente in corsivo, permettendo di riconoscere immediatamente una variabile rispetto al resto del codice.
<p>Il codice contiene la variabile <var>variab</var> = 1.</p>
Per rappresentare il risultato prodotto da un programma o da un comando si utilizza il tag <samp>. Anche questo viene generalmente visualizzato con un carattere monospace, ma il suo significato semantico indica che il contenuto rappresenta un output del programma.
<samp>Attenzione: errore nell’avvio del programma (error 8102).</samp>
Per indicare una combinazione di tasti della tastiera si utilizza il tag <kbd>. È ideale per scrivere scorciatoie come Ctrl+C, Ctrl+V oppure Alt+Tab e indica al browser che il contenuto rappresenta un comando da tastiera.
<p>Per incollare un testo, premi <kbd>Crtl + V</kbd>.</p>