<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

Gli attributi di questo elemento includono gli attributi globali.

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.

Guarda anche

Liste utili