Tag HTML <pre>
Usa il tag <pre> per definire testo preformattato, da presentare esattamente come scritto nel file HTML.
Il tag HTML <pre> definisce il testo preformattato — testo che viene visualizzato esattamente come è scritto nel sorgente, con tutti gli spazi e le interruzioni di riga conservati. I browser mostrano il contenuto di un elemento <pre> con un font a larghezza fissa (monospace). Viene utilizzato più spesso per mostrare codice sorgente (di solito insieme al tag <code>) o qualsiasi testo in cui l'autore controlla la disposizione esatta delle righe, come una poesia o ASCII art.
Perché <pre> Preserva lo Spazio Bianco
Per impostazione predefinita, i browser comprimono lo spazio bianco: una sequenza di spazi, tabulazioni e ritorni a capo viene visualizzata come un singolo spazio, e le interruzioni di riga nel codice HTML non hanno effetto visivo. Questo è il motivo per cui scrivere più spazi o premere Invio all'interno di un paragrafo normale non cambia l'aspetto del testo.
L'elemento <pre> disattiva questo comportamento. Al suo interno, ogni spazio, tabulazione e interruzione di riga è significativo e mostrato letteralmente — non è necessario o <br> per controllare la spaziatura. Sotto il cofano, questo è lo stesso effetto dell'applicazione della dichiarazione CSS white-space: pre, che è lo stile predefinito che i browser assegnano a <pre>.
Usa <pre> ogni volta che la disposizione esatta dei caratteri è importante: elenchi di codice, output della riga di comando, testo semplice in forma tabellare, o arte composta da caratteri.
Sintassi
Il tag <pre> è un tag di coppia. Il contenuto è scritto tra il tag di apertura (<pre>) e il tag di chiusura (</pre>). Nota che il testo di solito inizia sulla riga successiva al tag di apertura, e qualsiasi rientro aggiunto all'interno del sorgente apparirà nell'output.
Gli elementi inline sono tipicamente inseriti all'interno del tag <pre>. Sebbene gli elementi block-level siano consentiti in HTML5, possono introdurre spazi bianchi o rientri inattesi, quindi gli elementi inline sono generalmente preferiti.
Esempio del Tag HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Risultato
Il Pattern <pre><code> per i Blocchi di Codice
Il modo canonico e accessibile per visualizzare un blocco di codice sorgente è annidare un elemento <code> all'interno di un elemento <pre>:
<pre>fornisce il layout a blocchi e preserva lo spazio bianco e le interruzioni di riga.<code>aggiunge la semantica: contrassegna il contenuto come codice informatico anziché testo ordinario.
Insieme, comunicano ai motori di ricerca e alle tecnologie assistive esattamente di cosa si tratta. Gli screen reader possono annunciarlo come una regione di codice, e le librerie di evidenziazione della sintassi (Prism, highlight.js, ecc.) puntano al selettore pre > code per colorare il markup. Usare <pre> da solo manterrebbe la formattazione ma perderebbe quel significato, quindi l'abbinamento è il pattern raccomandato.
Esempio del Tag HTML <pre> con l'Elemento <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>Lo spazio bianco all'interno di <pre> è letterale, quindi metti il tag di chiusura </pre> subito dopo il codice (come sopra). Le righe vuote iniziali e il rientro tra <pre> e <code> vengono visualizzati, motivo per cui un sorgente con rientri profondi può apparire con righe vuote indesiderate e spazi iniziali.
Escape dei Caratteri <, > e & all'Interno di <pre>
<pre> preserva lo spazio bianco, ma non disattiva il parsing HTML. Il browser legge ancora il contenuto come markup. Quindi, se vuoi visualizzare HTML letterale o qualsiasi cosa contenente i caratteri <, > o &, devi eseguire l'escape con entità HTML — altrimenti il browser cercherà di interpretarli come tag:
| Carattere | Entità |
|---|---|
< | < |
> | > |
& | & |
Ad esempio, per mostrare il testo <p>Hello & welcome</p> devi scrivere:
<pre><code><p>Hello & welcome</p></code></pre>La pagina mostra quindi le parentesi angolari invece di visualizzare un paragrafo. Consulta il riferimento HTML Unicode per l'elenco completo delle entità con nome.
Stilizzare <pre> e la Proprietà white-space
I browser stilizzano <pre> con white-space: pre per impostazione predefinita. Puoi modificare il modo in cui il testo preformattato va a capo usando la proprietà CSS white-space:
| Valore | Ritorni a capo | Spazi / tabulazioni | A capo automatico |
|---|---|---|---|
pre | preservati | preservati | mai (impostazione predefinita per <pre>) |
pre-wrap | preservati | preservati | va a capo quando la riga è troppo lunga |
pre-line | preservati | compressi | va a capo quando la riga è troppo lunga |
Poiché pre non va mai a capo, una riga di codice lunga uscirà dal contenitore. La soluzione più comune è aggiungere una barra di scorrimento orizzontale con overflow-x: auto, che mantiene la formattazione originale e consente al lettore di scorrere lateralmente:
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Se preferisci che il testo vada a capo alla riga successiva invece di scorrere, usa white-space: pre-wrap.
Attributi
L'elemento <pre> non ha attributi obbligatori. I vecchi attributi width, cols e wrap sono deprecati e rimossi da HTML5 — usa invece CSS:
| Attributo deprecato | A cosa serviva | Usare invece |
|---|---|---|
width | suggeriva la larghezza in caratteri | CSS max-width |
cols | suggeriva il numero di colonne | CSS width / max-width |
wrap | controllava il ritorno a capo | CSS white-space: pre-wrap |
Il tag <pre> supporta gli Attributi Globali e gli Attributi Evento.
Tag Correlati
<code>— contrassegna un frammento di codice informatico.<samp>— output di esempio di un programma.<kbd>— input da tastiera.- Elementi di codice informatico HTML — panoramica di tutti i tag relativi al codice.