Tag HTML <code>
Il tag <code> serve a inserire righe di codice di programma. Descrizione del tag, attributi ed esempi di utilizzo.
Il tag <code> viene utilizzato per contrassegnare un frammento di codice informatico — un nome di variabile, una chiamata di funzione, uno spezzone di codice sorgente oppure qualsiasi testo che l'utente deve digitare o leggere come codice. Nel browser, il contenuto viene visualizzato con un font a spaziatura fissa (un font in cui tutti i caratteri hanno la stessa larghezza). Il tag <code> è un elemento inline per impostazione predefinita.
Il tag <code> è semantico: comunica ai browser, alle tecnologie assistive e ai motori di ricerca che il testo racchiuso è codice, non prosa. Questo è il motivo per cui si ricorre ad esso — la stilizzazione a spaziatura fissa è solo la presentazione predefinita, che puoi sovrascrivere con CSS.
Questa pagina illustra come si comporta <code> da solo, perché il codice su più righe deve essere racchiuso in <pre>, la trappola dell'escape HTML che incontrerai quando tenti di mostrare le parentesi angolari, la convenzione dei syntax highlighter e quando non usare <code>.
Sintassi
Il tag <code> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<code>) e quello di chiusura (</code>).
Esempio del tag HTML <code>:
Tag HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Esegui l'esempio precedente con l'editor Try it: il testo <code> si trova sulla stessa riga dei paragrafi circostanti, renderizzato con un font a spaziatura fissa, esattamente come qualsiasi altro elemento inline.
Perché <code> da solo comprime gli spazi bianchi
Come la maggior parte degli elementi HTML, <code> segue le normali regole degli spazi bianchi: sequenze di spazi, tabulazioni e ritorni a capo vengono compressi in un singolo spazio. Questo va bene per un singolo token (<code>let x = 10;</code>), ma il problema emerge non appena si incolla uno snippet su più righe:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>Nel browser questo viene reso come un'unica lunga riga — function greet(name) { return "Hello, " + name; } — perché ogni ritorno a capo e il rientro vengono compressi in singoli spazi.
Per preservare le interruzioni di riga e i rientri, racchiudi il <code> in un elemento <pre> ("preformattato"). <pre> mantiene gli spazi bianchi esattamente come scritti, e il <code> al suo interno conserva il significato semantico. <pre><code>…</code></pre> è l'accoppiamento standard per qualsiasi blocco di codice più lungo di una riga.
Esempio del tag HTML <code> inserito all'interno di un tag HTML <pre>:
Esempio del tag HTML <code> all'interno di un tag HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Escape di <, > e & all'interno di <code>
Un'operazione molto comune è mostrare HTML stesso all'interno di un blocco <code> — ma il browser non sa che il tuo <div> deve essere visualizzato anziché eseguito. Se scrivi un < o > letterale, il browser cerca di interpretarlo come un tag e il tuo esempio scompare silenziosamente. Lo stesso vale per &, che dà inizio a un riferimento di carattere.
Devi sostituire quei caratteri con le rispettive entità HTML:
| Carattere | Entità | Significato |
|---|---|---|
< | < | minore di |
> | > | maggiore di |
& | & | e commerciale |
Quindi per visualizzare il testo <a href="#"> si scrive in realtà:
<code><a href="#"></code>E per mostrare if (a && b):
<code>if (a && b)</code>Dimenticare di fare l'escape di & è il bug più subdolo: © verrà renderizzato come il simbolo © invece del testo letterale. In caso di dubbio, fai sempre l'escape di <, > e &.
Esempio del tag HTML <code> con proprietà CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>La classe language-* per i syntax highlighter
Il <code> semplice non conosce quale linguaggio di programmazione contiene, quindi non può colorare da solo parole chiave, stringhe e commenti. Le librerie di syntax highlighting come Prism e highlight.js risolvono questo problema con una convenzione basata sul nome della classe: si aggiunge una classe language-<name> all'elemento <code> (di solito all'interno di un <pre>), e la libreria analizza la pagina, legge la classe e applica i colori corretti.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Qui language-js indica all'highlighter di trattare il contenuto come JavaScript. Altri valori comuni sono language-css, language-html e language-python. La classe è puramente informativa per l'highlighter — l'elemento <code> mantiene comunque il suo significato semantico anche se non è caricato alcun highlighter. (Nota il => nello snippet sopra: anche all'interno di un blocco evidenziato, devi comunque fare l'escape di > affinché la arrow function venga visualizzata correttamente.)
Quando non usare <code>
<code> è destinato ai contenuti che sono genuinamente codice. Non usarlo solo perché vuoi un font a spaziatura fissa:
- Input da tastiera che l'utente deve premere → usa
<kbd>, ad es.<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Output del programma / risultati di esempio → usa
<samp>. - Una variabile o un segnaposto in matematica o in prosa → usa
<var>. - Testo a spaziatura fissa puramente decorativo senza alcun significato di codice → usa uno
<span>e stilizzalo con CSS. Ricorrere a<code>in questo caso è fuorviante per i lettori di schermo e i motori di ricerca.
Scegliere l'elemento giusto mantiene il markup onesto: il tag descrive cosa è il testo, mentre CSS decide come appare.
Tag correlati
<pre>— preserva gli spazi bianchi; racchiudi<code>al suo interno per i blocchi su più righe.<kbd>— input da tastiera digitato dall'utente.<samp>— output di esempio da un programma.<var>— un nome di variabile o segnaposto.
Attributi
Il tag <code> supporta gli Attributi Globali e gli Attributi di Evento.
Ad esempio, puoi usare l'attributo title per aggiungere un tooltip: <code title="Variable declaration">let x = 10;</code>.