Panoramica

L'HTML semantico usa elementi con significato per descrivere struttura e ruolo dei contenuti. Questo migliora accessibilità, SEO e manutenibilità. In questa guida vedrai come progettare i landmark di pagina, impostare correttamente i titoli, scegliere i tag adatti a contenuti e controlli, e quando usare ARIA.

Struttura e landmark

Definisci i landmark principali per aiutare utenti e tecnologie assistive a navigare rapidamente nella pagina.

<header>
  <nav aria-label="Principale">...</nav>
</header>
<main id="contenuto">
  <article>
    <h1>Titolo pagina</h1>
    <section aria-labelledby="sezione1">
      <h2 id="sezione1">Sezione 1</h2>
      <p>Testo.</p>
    </section>
  </article>
  <aside aria-label="Approfondimenti">...</aside>
</main>
<footer>...</footer>

• Un solo <main> per pagina, unico e senza ruolo nascosto.
• Usa <nav> per gruppi di link di navigazione: principale, breadcrumb, footer (con aria-label descrittivo).
• <article> per contenuti autonomi e riutilizzabili; <section> per raggruppare contenuti correlati con un titolo.
• <aside> per contenuti complementari; <footer> può esistere sia a livello di pagina sia all'interno di article.

Pattern comuni

Adotta i tag più espressivi per ogni tipo di contenuto.

• Titoli: un solo <h1>; usa <h2> per sezioni e <h3> per sottosezioni, senza saltare gerarchie.
• Testo: <p> per paragrafi, <strong> e <em> per enfasi semantica.
• Liste: <ul>/<ol> per elenchi; <dl> per definizioni.
• Media: usa <figure> e <figcaption> per immagini con didascalia; attribuisci sempre alt significativo.
• Link e bottoni: link per navigare (<a href>), bottoni per azioni (<button>); evita div cliccabili.
• Tabelle: imposta <caption>, <thead>/<tbody>, <th scope>; usa headers/id per tabelle complesse.
• Form: associa sempre <label for>, utilizza fieldset/legend per gruppi, indica gli errori con aria-describedby.

<figure>
  <img src="immagine.jpg" alt="Diagramma dei landmark di una pagina" width="800" height="450" loading="lazy">
  <figcaption>Esempio di struttura semantica con landmark.</figcaption>
</figure>

Accessibilità, ARIA e SEO

L'HTML semantico fornisce ruoli e relazioni nativi che le tecnologie assistive comprendono. ARIA va usata per colmare le lacune, non per sostituire tag corretti.

• ARIA first rule: se c'è un tag nativo, usalo; evita di sovrascriverne il ruolo.
• Focus: mantieni l'ordine logico di tabulazione e usa tabindex="-1" solo per ancoraggi di salto.
• SEO: titoli chiari, uso corretto di meta, link descrittivi e immagini con alt migliorano interpretazione e ranking.
• Verifica: Lighthouse, WAVE, axe DevTools e validator W3C aiutano a trovare problemi semantici e di accessibilità.

Checklist rapida

• Definiti i landmark: header, nav, main, aside, footer.
• Un solo h1, gerarchia di titoli coerente.
• Link e bottoni usano i tag corretti e sono attivabili da tastiera.
• Immagini con testo alternativo significativo; figure con figcaption quando serve.
• Tabelle con caption, scope e associazioni dove necessario.
• Form con label associati, gruppi con fieldset/legend, messaggi collegati da aria-describedby.
• Verifiche con Lighthouse/WAVE/validator effettuate senza errori bloccanti.

FAQ