HTML semantico: le impostazioni predefinite sono già ottime

Prima di scrivere il CSS, scrivi l'HTML. Bene.

Cosa significa "semantico"

Usa il tag che descrive lo scopo, non l'aspetto:

• <nav> per la navigazione, non <div class="nav">.
• <main> per il contenuto principale.
• <article> per i contenuti autonomi (un post, una pagina di prodotto).
• <aside> per contenuti correlati ma separabili.
• <header> / <footer> per intestazioni e piè di pagina (sia del sito che di un <article>).
• <section> per raggruppamenti tematici e con titolo.
• <button> per le azioni, `` per la navigazione. Mai il contrario.

Vantaggi immediati

Accessibilità gratuita. Gli screen reader comprendono la struttura senza ARIA. Gli utenti che utilizzano la tastiera navigano tramite punti di riferimento.

Migliore SEO. I motori di ricerca comprendono la gerarchia.

CSS più semplice. article > header > h1 è un selettore utile. Se è tutto ``s, servono classi per ogni cosa.

Meno classi. Pico CSS, senza classi, dimostra che con l'HTML semantico sei già all'80% del percorso.

Esempi pratici

Un elenco di post:

<ol class="post-list" reversed>
  
    <article>
 <a href="/post">Titolo
 <time datetime="2026-04-23">23 aprile 2026</time>
 Descrizione...
    </article>
  
</ol>

Una scheda di progetto:

<article>
  <header>
    Nome del progetto
    Front-end · 2025
  </header>
  <footer>
    <a href="https://...">Visita
  </footer>
</article>