<pre>: l'elemento "testo preformattato"
L' elemento HTML <pre>
rappresenta il testo preformattato che deve essere presentato esattamente come scritto nel file HTML. Il testo viene in genere visualizzato utilizzando un carattere non proporzionale, o a spaziatura fissa. Gli spazi bianchi all'interno di questo elemento vengono visualizzati come scritti.
Se devi visualizzare caratteri riservati come <, >, & e " all'interno del tag <pre>
, i caratteri devono essere sottoposti a escape utilizzando la rispettiva entità HTML .
Attributi
cols
Contiene il conteggio preferito di caratteri che dovrebbe avere una riga. Era un sinonimo non standard di width
. Per ottenere un tale effetto, usa invece la proprietà CSS width
.
width
Contiene il conteggio preferito di caratteri che dovrebbe avere una riga. Sebbene tecnicamente ancora implementato, questo attributo non ha alcun effetto visivo; per ottenere un tale effetto, usa invece la proprietà CSS width
.
wrap
È un suggerimento che indica come deve verificarsi l'overflow. Nel browser moderno questo suggerimento viene ignorato e nessun effetto visivo risulta nel suo presente; per ottenere un tale effetto, usa invece la proprietà CSS white-space
.
Esempio
<p>Usare CSS per cambiare il colore del testo è semplice </p>
<pre>
body {
color: red;
}
</pre>
Problemi di accessibilità
È importante fornire una descrizione alternativa per qualsiasi immagine o diagramma creato utilizzando testo preformattato. La descrizione alternativa deve descrivere in modo chiaro e conciso il contenuto dell'immagine o del diagramma.
Le persone che soffrono di problemi di vista e navigano con l'ausilio di tecnologie assistive come uno screen reader potrebbero non capire cosa rappresentano i caratteri di testo preformattati quando vengono letti in sequenza.
Una combinazione degli elementi <figure>
e <figcaption>
, integrati dall'ARIA role
e dagli attributi aria-label
sull'elemento <pre>
consentono di annunciare l'immagine ASCII preformattata come un'immagine con testo alternativo e <figcaption>
di fungere da didascalia dell'immagine.