Elementi semantici HTML5

Dare un senso alla struttura

In passato, per strutturare una pagina web si usavano quasi esclusivamente i tag <div>. C'era un <div> per l'intestazione, uno per il menu, uno per i contenuti principali e un altro per il piè di pagina. Funzionava, ma era come costruire una casa usando solo mattoni generici. Il browser vedeva tanti blocchi identici, senza capire la funzione di ciascuno. Il codice finiva per assomigliare a questo:

<!-- Il vecchio modo: tutto con i div -->
<div id="header">
  <h1>Il mio sito web</h1>
</div>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Chi siamo</a></li>
  </ul>
</div>
<div id="content">
  <p>Contenuto principale della pagina...</p>
</div>
<div id="footer">
  <p>&copy; 2023 Il mio sito web</p>
</div>

Con HTML5 sono stati introdotti gli elementi semantici. Questi tag non servono solo a contenere informazioni, ma descrivono il significato del loro contenuto. Invece di usare un generico <div>, ora abbiamo tag specifici come <header>, <nav>, <main>, <footer>, <article>, <section> e <aside>. Usarli rende il codice più leggibile per gli sviluppatori, più accessibile per le tecnologie assistive (come gli screen reader) e più comprensibile per i motori di ricerca.

L'HTML semantico non solo migliora la leggibilità del tuo codice, ma ottimizza anche l'accessibilità e la SEO.

I blocchi fondamentali della pagina

Immagina una pagina web come un documento. Avrà un'intestazione, un'area di navigazione, un contenuto principale e un piè di pagina. L'HTML5 fornisce tag specifici per ognuna di queste parti.

Ecco una panoramica dei tag principali:

<header>: Rappresenta l'intestazione di una pagina o di una sezione. Di solito contiene il logo, il titolo del sito e la navigazione principale.
<footer>: Il piè di pagina. Tipicamente include informazioni di copyright, link a termini di servizio e contatti.
<nav>: È usato specificamente per i blocchi di navigazione principali, come il menu del sito.
<main>: Contiene il contenuto principale e unico della pagina. Dovrebbe essercene solo uno per pagina.
<aside>: Per contenuti correlati ma secondari, come una barra laterale (sidebar), pubblicità o biografie di autori. Sta "a lato" del contenuto principale.

L'uso corretto di questi elementi crea una struttura chiara e logica.

Organizzare il contenuto: Article vs Section

La distinzione tra <article> e <section> può creare confusione, ma la regola è semplice.

Usa <article> per un blocco di contenuto autonomo e indipendente. Se potessi prendere quel contenuto e metterlo su un altro sito (come un feed RSS) e avesse ancora senso da solo, allora è un <article>. Esempi perfetti sono un post di un blog, un articolo di giornale o un commento in un forum.

Un <article> è un contenuto completo e distribuibile a sé stante.

Usa <section> per raggruppare contenuti tematicamente correlati all'interno di un contesto più ampio. Una section non è pensata per essere letta da sola, ma come parte di qualcos'altro. Ad esempio, un articolo di un blog (l'<article>) potrebbe essere diviso in sezioni (<section>) come "Introduzione", "Sviluppo" e "Conclusioni".

<main>
  <article>
    <h1>La storia del caffè</h1>

    <section>
      <h2>Le origini in Etiopia</h2>
      <p>Il racconto della scoperta del caffè...</p>
    </section>

    <section>
      <h2>La diffusione in Europa</h2>
      <p>Come il caffè ha conquistato il vecchio continente...</p>
    </section>

    <p>Considerazioni finali sull'argomento.</p>
  </article>
</main>

In questo esempio, l'intero pezzo sul caffè è un <article>. Le sue parti tematiche, come le origini e la diffusione, sono <section>.

La gerarchia dei titoli

I titoli, da <h1> a <h6>, sono fondamentali per la struttura e l'accessibilità. Non dovrebbero essere usati solo per motivi stilistici (come rendere un testo più grande), ma per creare una gerarchia logica dei contenuti.

La regola generale è:

Usa un solo <h1> per pagina, che rappresenti il titolo principale.
Usa i titoli in ordine, senza saltare livelli (ad esempio, non passare da un <h2> a un <h4>).

Con HTML5, ogni elemento di sezionamento (come <article> e <section>) può avere il proprio <h1>. Questo crea una struttura di titoli annidata, dove un <h1> dentro una <section> è considerato un sottotitolo rispetto all'<h1> principale della pagina. Questo aiuta le tecnologie assistive a navigare il documento in modo efficiente.

Una buona gerarchia dei titoli non solo aiuta le persone che usano screen reader, ma permette anche ai motori di ricerca di capire meglio l'organizzazione e l'importanza dei tuoi contenuti.

Metti alla prova la tua comprensione degli elementi semantici.

Quiz Questions 1/6

Qual è il vantaggio principale dell'utilizzo di tag semantici come <header>, <nav> e <main> rispetto all'uso esclusivo di <div>?

Quiz Questions 2/6

Quale tag semantico è più appropriato per contenere il contenuto principale e unico di una pagina, come il testo di un articolo o la galleria di prodotti?

Usare gli elementi semantici di HTML5 è un passo cruciale per scrivere codice moderno, pulito e accessibile. Rende le tue pagine web migliori per tutti: utenti, motori di ricerca e altri sviluppatori.

HTML Intermedio