Testo, immagini, link ed elenchi

HTML mette a disposizione sei livelli di intestazione. Li utilizzi per creare la struttura del documento, non per modificare la dimensione del testo. <h1> è il titolo della pagina (una volta per pagina), <h2> si usa per le sezioni principali, <h3> per le sottosezioni e così via.

L'elemento <p> racchiude un paragrafo di testo. Il browser aggiunge automaticamente spazio sopra e sotto. Utilizzi <br> con moderazione: solo per interruzioni di riga significative, come in un indirizzo o in una poesia, non per creare spazio tra i paragrafi.

Utilizzi gli elementi in linea per attribuire un significato al testo: <strong> per il testo importante (grassetto), <em> per l'enfasi (corsivo), <code> per frammenti di codice, <mark> per il testo evidenziato e <small> per le note in piccolo.

L'elemento <img> incorpora un'immagine. L'attributo src specifica l'URL e alt fornisce il testo alternativo per i lettori di schermo e quando l'immagine non viene caricata. Includa sempre un valore alt significativo.

Il testo alternativo dovrebbe comunicare il contenuto e lo scopo dell'immagine. Per le immagini decorative (spaziatori, icone utilizzate esclusivamente a scopo decorativo), utilizzi alt="" (stringa vuota), così i lettori di schermo le ignorano. Non scriva mai alt="image of": descriva semplicemente ciò che l'immagine mostra.

L'elemento <a> (ancora) crea collegamenti ipertestuali. L'attributo href imposta l'URL di destinazione. Il testo del collegamento dovrebbe descrivere la destinazione: non scriva mai "fai clic qui".

Quando apre i collegamenti in una nuova scheda con target="_blank", aggiunga sempre rel="noopener noreferrer". In caso contrario, la pagina aperta può accedere all'oggetto window della finestra che l'ha aperta: una vulnerabilità di sicurezza chiamata reverse tabnapping.

Utilizzi <ul> (elenco non ordinato) quando l'ordine degli elementi non è importante: funzionalità, ingredienti o collegamenti di navigazione. Ogni elemento è un <li>. Il browser visualizza per impostazione predefinita i punti elenco, ma quasi sempre li si definisce con CSS.

Utilizzi <ol> (elenco ordinato) quando l'ordine è importante: passaggi di un tutorial, classifiche o istruzioni. Gli elementi vengono numerati automaticamente. Utilizzi gli attributi start e reversed per controllare la numerazione.

<dl> (elenco di descrizioni) raggruppa termini e relative definizioni o descrizioni. Lo utilizzi per glossari, metadati (autore/data) e coppie chiave-valore. <dt> è il termine, <dd> è la descrizione.

Gli elenchi possono essere annidati per rappresentare gerarchie. Inserisca l'elemento <ul> o <ol> figlio all'interno dell'elemento <li> genitore. Non li annidi solo per creare un rientro: utilizzi invece CSS.

Quale attributo fornisce una descrizione testuale di un'immagine per i lettori di schermo?

Utilizzi gli elementi di intestazione per la struttura del documento, p per i paragrafi, img con testo alt significativo per le immagini, a con testo descrittivo per i collegamenti e ul/ol/dl per i contenuti a elenco. La semantica rende l'HTML accessibile e leggibile dalle macchine.