HTML

Ogni esempio di questo modulo ha il codice a sinistra e, a destra, quello che mostra un browser vero. Il codice si può modificare: cambia una parola o un tag e l'anteprima si aggiorna da sola. Se sbagli, il pulsante Ripristina riporta tutto com'era. Sui telefoni tocca prima Modifica.

Che cos'è l'HTML

Un linguaggio di marcatura

HTML (HyperText Markup Language) non è un linguaggio di programmazione: non ha variabili, cicli o condizioni. È un linguaggio di marcatura (markup): un modo di aggiungere al testo delle annotazioni, distinte dal testo stesso, che ne descrivono il ruolo. «Questo è un titolo», «questo è un paragrafo», «questa parola è un collegamento».

Il termine viene dalla tipografia. Prima dei computer, i redattori scrivevano a mano sui manoscritti istruzioni per l'autore o per il compositore: «grassetto», «a capo», «titolo di capitolo». Quelle annotazioni erano il markup. In HTML le annotazioni si chiamano tag e si scrivono tra parentesi angolari: <h1>, <p>, <a>.

HTML, XHTML e HTML5

L'HTML ha avuto una storia movimentata. A metà degli anni 2000 il W3C lavorava a XHTML 2.0, una revisione radicale basata su XML: rinunciava alla compatibilità con le pagine esistenti e prevedeva browser molto meno tolleranti, pronti a rifiutare una pagina per un solo errore di sintassi.

Nello stesso periodo un gruppo di sviluppatori di Opera, Mozilla e Apple fonda il WHATWG (Web Hypertext Application Technology Working Group), convinto che quella strada fosse sbagliata per un Web fatto di miliardi di pagine imperfette. Nel 2009 il W3C abbandona XHTML 2.0 e adotta il lavoro del WHATWG, che prende il nome di HTML5. I suoi tre obiettivi:

1. specificare senza ambiguità come i browser devono trattare il markup non valido, così che tutti lo correggano allo stesso modo;
2. offrire, attraverso JavaScript, una piattaforma aperta e non proprietaria per costruire applicazioni web ricche;
3. restare compatibile con il Web esistente.

Oggi l'HTML è un living standard, uno standard «vivo» che evolve continuamente: ogni browser ne supporta un sottoinsieme che cresce nel tempo. Per sapere se una funzione è supportata si consultano caniuse.com e la documentazione di MDN (MDN Web Docs, di Mozilla), il riferimento più affidabile per HTML e CSS.

Per cominciare bastano pochi strumenti:

• Un editor di testo per programmatori: Visual Studio Code è gratuito e il più diffuso. Un file HTML è semplice testo, salvato con estensione .html.
• Un browser, con i suoi strumenti per sviluppatori (F12): la scheda Elementi mostra l'albero della pagina e gli stili applicati.
• Il validatore del W3C, validator.w3.org: controlla che il markup segua le regole dello standard. Validare è stata una delle bandiere del movimento per gli standard web degli anni 2000, ed è ancora un'abitudine eccellente.

La sintassi

Elementi, tag e contenuto

Un documento HTML è fatto di testo e di elementi. Un elemento di solito ha un tag di apertura, un contenuto e un tag di chiusura, che ripete il nome preceduto da una barra.

Attributi ed elementi vuoti

Gli attributi aggiungono informazioni a un elemento e si scrivono nel tag di apertura, nella forma nome="valore", separati da spazi. Alcune regole:

• i valori vanno tra virgolette, doppie o singole. HTML5 tollera valori senza virgolette se non contengono spazi, ma è meglio metterle sempre;
• l'ordine degli attributi non conta;
• gli attributi booleani valgono per la sola presenza: <input required>. Scrivere required="false" non li disattiva: per disattivarli bisogna toglierli.

Alcuni elementi non hanno contenuto: sono istruzioni per il browser, come «inserisci qui un'immagine» o «vai a capo». Si chiamano elementi vuoti (void elements) e hanno solo il tag di apertura: <img>, <br>, <hr>, <input>, <meta>, <link>, <source>, <track>, <wbr>.

In XHTML andavano chiusi con una barra finale, <br />. In HTML5 la barra è facoltativa: <br> e <br /> sono equivalenti. Scegli uno stile e usalo sempre.

L'annidamento

Spesso un elemento ne contiene altri. L'elemento che contiene è il genitore (parent), quelli contenuti direttamente sono i figli (children). Gli elementi contenuti a qualsiasi livello sono i discendenti, e al contrario gli elementi che contengono un elemento, a qualsiasi livello, sono i suoi antenati. Elementi con lo stesso genitore sono fratelli (siblings). Questi termini torneranno di continuo nei selettori CSS.

Perché il browser costruisca la gerarchia giusta, gli elementi devono essere annidati correttamente: il tag di chiusura di un figlio deve venire prima di quello del genitore. Come le parentesi in matematica: ( [ ] ) va bene, ( [ ) ] no.

<h1>Share Your <strong>Travels</strong></h1>

<h1>Share Your <strong>Travels</h1></strong>

Il browser costruisce dal codice un albero, il DOM (Document Object Model): ogni elemento è un nodo, con il suo genitore e i suoi figli. Nell'esempio apri la scheda Albero DOM e passa sopra i nodi: l'elemento corrispondente si illumina nell'anteprima.

Commenti, spazi e maiuscole

Tre dettagli che fanno la differenza.

• Commenti: tutto quello che sta tra <!-- e --> viene ignorato dal browser. Servono per annotare il codice, ma sono visibili a chiunque apra il sorgente della pagina: mai scriverci password o note riservate.
• Spazi bianchi: il browser riduce qualsiasi sequenza di spazi, tabulazioni e a capo a un solo spazio. Andare a capo nel codice non va a capo nella pagina: per quello servono nuovi paragrafi, o in casi rari <br>.
• Maiuscole: i nomi di tag e attributi non distinguono maiuscole e minuscole (<P> = <p>), ma la convenzione è scrivere tutto in minuscolo.

La struttura di un documento

Il documento più piccolo

Il più piccolo documento HTML5 valido è sorprendentemente corto:

Un documento completo

Il documento minimo funziona perché il browser aggiunge da solo gli elementi che mancano. Nella pratica si scrive sempre la struttura completa:

<!DOCTYPE html>                                        <!-- 1 -->
<html lang="it">                                       <!-- 2 -->
<head>                                                 <!-- 3 -->
    <meta charset="utf-8">                             <!-- 5 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Share Your Travels — New York, Central Park</title>
    <link rel="stylesheet" href="css/main.css">        <!-- 6 -->
    <script src="js/main.js" defer></script>          <!-- 7 -->
</head>
<body>                                                 <!-- 4 -->
    <h1>Il titolo principale va qui</h1>
    …
</body>
</html>

HTML5 non obbliga a scrivere <html>, <head> e <body>: se mancano, il browser li crea da solo. In XHTML erano obbligatori, e quasi tutti gli sviluppatori continuano a scriverli, per chiarezza.

Dentro la testa

La testa contiene i metadati, cioè i dati sul documento. Gli elementi più usati:

Il markup semantico

Struttura da una parte, aspetto dall'altra

Negli ultimi vent'anni si è affermato un principio condiviso: l'HTML descrive solo la struttura e il significato del contenuto; come deve apparire lo decide il CSS. Scrivere HTML semantico significa scegliere ogni elemento per quello che il contenuto è, non per come apparirà: un titolo è h2 perché è un titolo di secondo livello, non perché lo vuoi grande e in grassetto.

<font size="5" color="red"><b>Offerte</b></font>
<br><br>
<center>Solo per oggi!</center>

<h2>Offerte</h2>
<p class="avviso">Solo per oggi!</p>

Scrivere HTML semantico conviene per quattro motivi:

Il testo

Titoli: da h1 a h6

L'HTML prevede sei livelli di titolo, da h1 a h6: più alto il numero, meno importante il titolo. I titoli sono lo strumento principale per mostrare ai lettori (e ai lettori di schermo, e ai motori di ricerca) la struttura del documento, come l'indice di un libro.

Ogni browser ha il suo stile predefinito per i titoli, facile da cambiare con il CSS. Proprio per questo il livello va scelto per il significato, mai per l'aspetto:

• non scegliere h3 perché vuoi un testo in grassetto da 16 punti: scegli h3 perché è un titolo di terzo livello;
• di solito c'è un solo h1 per pagina, il titolo principale;
• non saltare livelli: dopo un h2 viene un h3, non un h5.

Paragrafi, a capo e separatori

Il paragrafo va usato solo se non c'è un elemento più specifico. Queste due versioni sono entrambe valide, ma la seconda dice di più:

<section>
  …
  <p>Ultima modifica: 2001-04-23</p>
  <p>Autore: fred@example.com</p>
</section>

<section>
  …
  <footer>Ultima modifica: 2001-04-23</footer>
  <address>Autore: fred@example.com</address>
</section>

Citazioni

Gli elementi di testo in linea

Gli elementi in linea (inline) non interrompono il flusso del testo: stanno dentro una riga, senza andare a capo. HTML5 ne definisce più di trenta. Ecco quelli che userai di più, ognuno con il suo significato preciso.

Caratteri speciali: le entità

Alcuni caratteri non si possono scrivere direttamente: < e > hanno un significato riservato in HTML (aprono e chiudono i tag), altri sono difficili da digitare. Si scrivono con un'entità: &nome; oppure &#numero;.

Le liste

Liste puntate e numerate

L'HTML ha tre tipi di lista:

• non ordinata, ul (unordered list): elementi in nessun ordine particolare, mostrati con un pallino;
• ordinata, ol (ordered list): elementi in un ordine preciso, numerati;
• di descrizioni, dl (description list): coppie di termine e descrizione.

In ul e ol ogni voce è un li (list item). Un li può contenere qualsiasi cosa, anche un'altra lista: così si creano le liste annidate.

Numerazioni personalizzate

L'elemento ol ha tre attributi propri, e li uno:

Liste di descrizioni

Una dl contiene gruppi di termini (dt) seguiti dalle loro descrizioni (dd). Va bene per glossari, domande e risposte, schede tecniche, metadati: qualsiasi elenco di coppie nome-valore. Un gruppo può avere più termini (sinonimi) o più descrizioni.

I link

L'elemento a

I collegamenti sono il cuore dell'ipertesto. Si creano con l'elemento a (da anchor, «àncora») e hanno due parti: la destinazione, nell'attributo href, e l'etichetta, il contenuto dell'elemento, su cui si clicca. L'etichetta può essere testo o anche un'immagine.

Gli attributi principali di a:

Indirizzi assoluti e relativi

Per una risorsa su un altro sito serve un riferimento assoluto completo: il protocollo (https://), il nome di dominio, l'eventuale percorso e il nome del file. Per le risorse del tuo sito si usano quasi sempre riferimenti relativi, più brevi: se l'indirizzo non comincia con https://, il browser lo chiede allo stesso server da cui ha ricevuto la pagina, partendo dalla cartella in cui si trova la pagina stessa.

I percorsi sul Web seguono le convenzioni di Unix:

• la barra / separa le cartelle tra loro e dal nome del file;
• .. indica la cartella «sopra» quella attuale;
• un percorso che comincia con / parte dalla radice del sito.

Scegli nello strumento la pagina in cui scrivi il link e il file da raggiungere: vedrai il percorso da scrivere e i passi per costruirlo.

Link dentro la pagina

Per saltare a un punto della stessa pagina basta dare un id all'elemento di destinazione e usare #id come indirizzo. Negli esempi più vecchi si trovano àncore fatte con <a id="…"> dentro i titoli; oggi si mette l'id direttamente sul titolo.

L'elemento link e l'attributo rel

Da non confondere con a: l'elemento link sta nella testa e collega il documento a risorse esterne che non si cliccano. L'attributo rel dice che tipo di relazione c'è.

<head>
  <link rel="stylesheet" href="tema.css">
  <link rel="stylesheet" href="stampa.css" media="print">   <!-- solo quando si stampa -->
  <link rel="icon" href="favicon.png" sizes="32x32">
  <link rel="alternate" href="https://www.esempio.it/en/" hreflang="en">
</head>

Gli elementi di struttura

div, span e gli elementi di HTML5

div (division) e span sono contenitori senza significato: div è un blocco, span sta in linea. Non hanno alcuna presentazione propria: servono a raggruppare contenuti per applicare uno stile o per uno script, di solito con un attributo class o id.

Prima di HTML5, i siti complessi erano pieni zeppi di div annidati in altri div (qualcuno parlava di «div-ite»), e per dar loro un senso si usavano nomi di classe come header, nav, footer. HTML5 ha trasformato quei nomi ricorrenti in veri elementi.

<div id="header">
  <div id="nav">…</div>
</div>
<div id="main">
  <div class="post">…</div>
</div>
<div id="sidebar">…</div>
<div id="footer">…</div>

<header>
  <nav>…</nav>
</header>
<main>
  <article>…</article>
</main>
<aside>…</aside>
<footer>…</footer>

Ecco gli elementi di struttura introdotti da HTML5:

Come per nav, il browser non applica alcuno stile particolare a questi elementi: si comportano come dei div. La differenza è tutta nel significato, che però serve a lettori di schermo, motori di ricerca e a chiunque legga il codice. Nell'esempio il CSS disegna un bordo con il nome di ogni elemento: osserva la struttura e apri l'albero DOM.

section, article o div?

La specifica avverte che section non è un contenitore generico: per quello c'è già div. Quando un elemento serve solo per lo stile o per comodità di uno script, si usa div. Un buon test: il contenuto merita di comparire nell'indice del documento? Se sì, è una section (e avrà un titolo); altrimenti, un div.

E tra article e section: chiediti se il contenuto avrebbe senso da solo, pubblicato altrove o condiviso. Un post del blog sì (article); il paragrafo «Metodi» di una relazione no (section).

details e summary

Un piccolo gioiello di HTML5: un blocco che si apre e si chiude con un clic, perfetto per le domande frequenti, senza una riga di JavaScript. L'attributo open lo fa partire aperto.

Contatti: address

L'elemento address rappresenta le informazioni di contatto dell'article o del body più vicino che lo contiene: se sta nel body, i contatti valgono per tutto il documento. Non va usato per un indirizzo postale qualsiasi, ma solo per i contatti di chi è responsabile del contenuto. Di solito sta in un footer.

Le immagini

L'elemento img

L'elemento img inserisce un'immagine nel punto in cui compare. È un elemento vuoto: ha solo attributi, niente contenuto né tag di chiusura.

Scrivere un buon alt

Il testo alternativo non è una descrizione tecnica dell'immagine, ma ciò che l'immagine comunica in quel contesto. La prova: se al posto dell'immagine leggessi il testo di alt, la pagina avrebbe ancora senso?

<img src="IMG_4032.jpg" alt="IMG_4032.jpg">
<img src="torre.jpg" alt="immagine">
<img src="logo.png">                <!-- alt mancante -->
<img src="freccia.png" alt="freccia verde a destra">

<img src="torre.jpg" alt="La Torre di Pisa al tramonto">
<img src="logo.png" alt="Pizzeria da Gino, torna alla home">
<img src="freccia.png" alt="Pagina successiva">
<img src="decoro.png" alt="">       <!-- solo decorativa -->

• un'immagine dentro un link descrive la destinazione: il logo che porta alla home dice «torna alla home»;
• non serve scrivere «immagine di…»: il lettore di schermo annuncia già che è un'immagine;
• le immagini puramente decorative hanno alt="" (vuoto, ma presente): così il lettore di schermo le salta. Meglio ancora, se sono solo decorazione, metterle nel CSS come sfondo.

Formati: nel codice o nel CSS?

Un'immagine raster è una griglia di pixel: ingrandita, si sgrana. Un'immagine vettoriale è una descrizione di forme: il browser la ridisegna a qualsiasi dimensione. Tutte le illustrazioni degli esempi di questo corso sono SVG.

img è il modo più antico per mostrare un'immagine, ma non l'unico. Per le immagini puramente decorative, come sfondi sfumati, motivi, bordi ornamentali, ha senso tenerle fuori dal markup e metterle nel CSS con background-image. Quando invece l'immagine è contenuto, come le foto di una galleria o il prodotto in una scheda, img è la scelta semanticamente corretta.

figure e figcaption

L'elemento figure contiene un contenuto autonomo (un'immagine, uno schema, un blocco di codice, una poesia) a cui il testo fa riferimento come a un'unità, con una didascalia facoltativa figcaption, come prima o ultima cosa al suo interno. Il test: la figura si potrebbe spostare altrove nel documento (in fondo, in un'appendice) senza che il testo perda senso? Ma deve esserci: non è un abbellimento facoltativo.

Per questo figure non va usato per ogni immagine: non per il logo del sito, per i banner pubblicitari o per le decorazioni. Va usato quando il contenuto ha una didascalia ed è essenziale, ma la sua posizione esatta è poco importante.

Immagini responsive: srcset e picture

Un telefono con uno schermo largo 400 pixel non ha bisogno della stessa foto da 2.000 pixel che serve a un monitor grande: scaricarla spreca dati e tempo. Con srcset si offrono al browser più versioni della stessa immagine, ognuna con la sua larghezza reale (il descrittore w); con sizes si dice quanto sarà larga l'immagine nella pagina. Il browser fa i conti, tenendo conto anche della densità dello schermo, e scarica solo la versione adatta.

srcset serve quando l'immagine è la stessa a risoluzioni diverse. Quando invece vuoi un'immagine diversa (un ritaglio più stretto sul telefono, un formato più moderno dove è supportato) si usa picture: contiene uno o più source con una condizione, e un img finale di riserva. Il browser usa il primo source che soddisfa la condizione.

Le mappe di immagini

Una mappa di immagine divide un'immagine in regioni e associa un'azione (di solito un link) a ciascuna. Serve un img con l'attributo usemap="#nome" e un elemento map con lo stesso name, che contiene un area per ogni regione.

Le coordinate sono in pixel, con l'origine nell'angolo in alto a sinistra dell'immagine e la y che cresce verso il basso. Attenzione: le coordinate non si adattano se l'immagine viene ridimensionata con il CSS. Per questo oggi le mappe si usano poco, e si preferiscono SVG con link al loro interno o immagini sovrapposte a pulsanti.

Video, audio e pagine incorporate

Video, formati e sottotitoli

Prima di HTML5, per mostrare un video servivano plugin come Flash. Oggi basta l'elemento video, e il browser fornisce da solo i controlli per la riproduzione.

Non tutti i browser leggono gli stessi formati. Con più elementi source si offrono alternative: il browser usa il primo che sa riprodurre, grazie al tipo MIME in type. Il testo dentro video, dopo i source, compare solo nei browser che non supportano affatto l'elemento.

L'elemento track aggiunge sottotitoli o didascalie da un file di testo in formato WebVTT (.vtt): righe con un intervallo di tempo e il testo da mostrare. Sono fondamentali per chi non sente, e per chiunque guardi un video senza audio.

WEBVTT

00:00:00.000 --> 00:00:02.000
Questo è un video di prova.

00:00:02.000 --> 00:00:04.000
I sottotitoli arrivano da un file .vtt

L'elemento audio

audio funziona esattamente come video, senza immagine: stessi attributi (controls, autoplay, loop, muted, preload) e stessi source alternativi.

iframe

Un iframe (inline frame) incorpora un'altra pagina web dentro la pagina corrente: una mappa, un video di YouTube, un modulo di pagamento. È un contesto di navigazione annidato: una specie di browser nel browser, con il suo documento, la sua cronologia e i suoi script. Anche le anteprime degli esempi di questo corso sono iframe.

• src è l'indirizzo della pagina da incorporare;
• srcdoc contiene direttamente il codice HTML da mostrare (vince su src);
• name dà un nome al contesto: un link con target uguale a quel nome si aprirà dentro l'iframe;
• title descrive il contenuto per i lettori di schermo: va sempre messo;
• sandbox lo chiude in una «scatola di sabbia»: senza valori, la pagina incorporata non può eseguire script, inviare moduli o aprire finestre. Si concedono i permessi uno alla volta, come allow-scripts o allow-forms.

embed, object e param

Due elementi più antichi, nati per integrare contenuti esterni gestiti da un plugin o da un'applicazione esterna:

• embed è un elemento vuoto: src è l'indirizzo della risorsa e type il suo tipo MIME, che decide quale programma usare;
• object è più flessibile: a seconda della risorsa (in data, con il tipo in type) viene trattato come un'immagine, come un contesto annidato o come un plugin. Il suo contenuto è l'alternativa se la risorsa non si carica. I parametri per il plugin si passavano con elementi param (con name e value entrambi obbligatori), oggi considerati obsoleti.

Oggi i plugin non esistono più (Flash è stato dismesso nel 2020), e i due elementi si usano soprattutto per mostrare un PDF o un'immagine SVG.

Le tabelle

table, tr, th e td

Una tabella serve a presentare dati tabellari: informazioni che hanno senso in righe e colonne, come un orario, un listino, i risultati di un campionato. La tabella (table) è fatta di righe (tr, table row), e ogni riga di celle: td (table data) per i dati, th (table header) per le intestazioni.

Titolo, intestazione, corpo e piede

Una tabella completa si divide in parti con un significato preciso:

Celle che si estendono: colspan e rowspan

Una cella può occupare più colonne con colspan="n" o più righe con rowspan="n". Le celle «coperte» non si scrivono: nelle righe successive a un rowspan, quella colonna è già occupata.

I moduli

Il form e le etichette

Un modulo (form) raccoglie dati dall'utente e li invia a un server. Due attributi decidono dove e come, e si collegano direttamente a ciò che hai visto nel modulo su HTTP:

• action: l'URL del programma sul server che riceverà i dati;
• method: get (i dati nell'URL, dopo il ?) oppure post (i dati nel corpo della richiesta).

Ogni campo da inviare deve avere un attributo name: i dati partono come coppie name=valore. Un campo senza name non viene inviato.

Ogni campo ha bisogno di un'etichetta che dica cosa inserire. L'elemento label la collega al campo in due modi: avvolgendolo, oppure con l'attributo for uguale all'id del campo. Il collegamento ha due effetti concreti: cliccare l'etichetta attiva il campo (comodissimo con caselle piccole) e i lettori di schermo leggono l'etichetta quando il campo riceve il fuoco.

I tipi di input

L'elemento input cambia completamente comportamento a seconda del suo type. I tipi introdotti da HTML5 portano con sé la validazione e, sui telefoni, la tastiera giusta: numerica per tel e number, con la chiocciola per email.

textarea, select e datalist

La validazione

Il browser può controllare i dati prima di inviarli, e mostrare un messaggio accanto al campo sbagliato, grazie ad alcuni attributi:

Altri attributi utili: placeholder (un esempio dentro il campo, che non sostituisce l'etichetta), value (il valore iniziale), disabled (campo spento e non inviato), readonly (non modificabile ma inviato), autocomplete (aiuta il browser a riempire nome, email, indirizzo, password), autofocus (il cursore parte lì), inputmode (la tastiera da mostrare sul telefono).

Gli attributi globali

Attributi che valgono ovunque

Alcuni attributi si possono usare su qualsiasi elemento:

id o class?

<section id="contatti">…</section>

<p class="avviso importante">…</p>

Accessibilità e validazione

Un Web per tutti

Una pagina è accessibile quando può essere usata da chiunque: da chi non vede e usa un lettore di schermo che legge la pagina ad alta voce, da chi non può usare il mouse e naviga con la tastiera, da chi vede male e ingrandisce il testo, da chi non sente, da chi ha difficoltà cognitive. Ma anche da chi ha un braccio ingessato, usa il telefono sotto il sole o ha una connessione lenta.

Le regole internazionali sono le WCAG (Web Content Accessibility Guidelines) del W3C. In Europa l'European Accessibility Act le rende obbligatorie dal giugno 2025 per molti servizi privati, come e-commerce e banche; in Italia la Legge Stanca le impone da anni ai siti pubblici.

Le regole d'oro:

1. Usa l'elemento giusto. Un pulsante è un button, non un div cliccabile: il button si raggiunge con Tab, si attiva con Invio e viene annunciato come pulsante, gratis.
2. Struttura con i titoli, in ordine, senza saltare livelli: molti utenti di lettori di schermo navigano saltando da un titolo all'altro.
3. Usa i punti di riferimento: header, nav, main, footer permettono di saltare direttamente al contenuto.
4. Dai un alt a ogni immagine, vuoto se decorativa.
5. Collega ogni campo alla sua label.
6. Link con testi chiari: «programma del corso (PDF)», non «clicca qui». Chi usa un lettore di schermo spesso ascolta l'elenco dei soli link.
7. Dichiara la lingua con lang, anche per le frasi in un'altra lingua.
8. Contrasto sufficiente tra testo e sfondo, e mai informazioni affidate solo al colore («i campi in rosso sono obbligatori»).
9. Tutto deve funzionare da tastiera, e il fuoco deve essere visibile.
10. Sottotitoli per i video, trascrizioni per gli audio.

<div class="bottone" onclick="invia()">
  Invia
</div>

<button type="button" class="bottone" onclick="invia()">
  Invia
</button>

Quando l'HTML non basta (per esempio in componenti complessi costruiti con JavaScript) si possono aggiungere attributi ARIA (Accessible Rich Internet Applications), che descrivono ruoli e stati ai lettori di schermo: aria-label dà un nome a un pulsante che contiene solo un'icona, aria-expanded dice se un menu è aperto. La prima regola di ARIA però è: se esiste un elemento HTML che fa già quella cosa, usa quello.

<button type="button" aria-label="Chiudi">✕</button>
<nav aria-label="Percorso">Home › Corsi › Progettazione Web</nav>

Il validatore e gli errori tipici

Il browser è molto tollerante: corregge in silenzio moltissimi errori, e una pagina sbagliata spesso «sembra» funzionare. Ma ogni browser potrebbe correggerla in modo diverso, e i problemi emergono dopo, con il CSS o con un lettore di schermo. Per questo si passa il codice al validatore del W3C (validator.w3.org), che accetta un indirizzo, un file o codice incollato. Gli errori più comuni che segnala:

• tag non chiusi o annidati male;
• id ripetuti nella stessa pagina;
• immagini senza alt;
• elementi in posti dove non possono stare, come un div dentro un p, o un li fuori da una lista;
• attributi inesistenti o scritti male;
• la & non codificata negli URL (va scritta & dentro href, anche se i browser perdonano).

Verifica