Corso di HTML / Strutturare una pagina con elementi semantici

Gli elementi HTML semantici descrivono la funzione di ogni parte di una pagina. Utilizzate nav per la navigazione principale, main per il contenuto principale della pagina e article per contenuti autonomi. Questi ruoli mantengono significato anche se la disposizione visiva cambia.

Cosa significa ciascun elemento di sezione?

• header introduce una pagina o una sezione. Può contenere un nome del sito, un titolo o una navigazione.
• nav raggruppa i link di navigazione principali. Un gruppo non ha bisogno di nav solo perché contiene link.
• main contiene il contenuto principale unico della pagina. Un documento può avere al massimo una regione visibile main.
• article è adatto a un articolo o racconto autonomo. section suddivide il contenuto per argomenti e in generale dovrebbe avere un titolo che identifichi il suo argomento.
• aside contiene informazioni complementari che hanno solo un legame indiretto con il contenuto principale. footer contiene informazioni di chiusura per una pagina o una sezione.

Questi elementi da soli non determinano il loro posizionamento sullo schermo. Usate aside perché il contenuto è complementare, non perché si desideri una barra laterale; utilizzate il CSS per stabilire la sua posizione. Allo stesso modo, la semplice marcatura semantica da sola non garantisce né accessibilità né migliori posizionamenti nei motori di ricerca. Il contenuto reale, i titoli e l'ordine di lettura devono corrispondere ai ruoli degli elementi.

Creare una pagina completa con aree semantiche

L'esempio seguente è un documento HTML completo. I link di navigazione della pagina puntano a sezioni all'interno dello stesso file, quindi potete salvare e aprire l'esempio senza creare un'altra pagina. Scegliete i livelli dei titoli dopo aver suddiviso le sezioni usando intestazioni e paragrafi.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Piante primaverili | Piccolo Giardino</title>
</head>
<body>
  <header>
    <p>Piccolo Giardino</p>
    <nav aria-label="In questa pagina">
      <a href="#article">Leggi l&#x27;articolo</a>
      <a href="#sunlight">Bisogno di luce solare</a>
    </nav>
  </header>

  <main>
    <article id="article">
      <h1>Piante per la primavera</h1>
      <section id="sunlight">
        <h2>Bisogno di luce solare</h2>
        <p>Il fabbisogno di luce varia a seconda della pianta.</p>
      </section>
    </article>
    <aside>
      <p>Controlla la data dell&#x27;ultimo gelo nella tua regione prima di piantare.</p>
    </aside>
  </main>

  <footer>
    <p>Guida di Piccolo Giardino</p>
  </footer>
</body>
</html>

Salvate il codice con il nome index.html e apritelo in un browser. Il nome del sito web, la navigazione, l'articolo, la nota complementare e il piè di pagina appaiono più o meno dall'alto verso il basso. La selezione di "Bisogno di luce solare" consente di passare alla sezione, perché href="#sunlight" corrisponde a id="sunlight". Se volete che la nota stia accanto all'articolo, aggiungete un layout CSS invece di modificare il significato dell'HTML. Lo h1 nel codice è il titolo del documento di esempio, non un altro titolo in questo tutorial.

Quando dovreste usare section o article?

Un articolo di blog può stare da solo ed è un buon candidato per article. In questo articolo, argomenti come «Cosa ti serve» e «Passaggi» possono ciascuno costituire un section. Un contenitore usato solo per un bordo o un colore di sfondo non ha bisogno di un ruolo semantico; un div può essere più appropriato. Non è necessario includere ogni titolo e paragrafo in un section, se la loro gerarchia è già chiara. Per un contenitore usato solo per raggruppare elementi a scopo stilistico, seguite i criteri di Quando utilizzare div e span.

header e footer possono appartenere sia a un singolo article sia all'intera pagina. Un elenco di articoli di notizie che possono essere compresi indipendentemente può contenere un article per articolo. Decidete basandovi sul ruolo del contenuto e non sul nome dell'elemento o sul suo aspetto predefinito. Consultate la guida agli elementi HTML su MDN per le definizioni degli elementi.

Selezionare elementi per lo stesso contenuto

Se una pagina presenta sia una navigazione del sito sia una navigazione all'interno di un articolo, distinguete le due aree di navigazione con nomi significativi. Questo frammento identifica i loro diversi scopi.

<nav aria-label="Navigazione del sito web">
  <a href="index.html">Pagina iniziale</a>
  <a href="about.html">Presentazione</a>
</nav>
<nav aria-label="Sezioni di questo articolo">
  <a href="#sunlight">Luce</a>
  <a href="#watering">Irrigazione</a>
</nav>

Adattate i nomi dei file e gli identificatori dei frammenti alle destinazioni effettive. aria-label fornisce un nome accessibile per l'area di navigazione; non crea automaticamente un'intestazione di menu visibile.

Le linee guida WAI del W3C per la marcatura delle regioni spiegano come i nomi distinguano le regioni con ruoli simili.

Verificare la struttura del documento

Leggete i titoli, il menu e il contenuto principale nell'ordine del documento, anche se la loro posizione sullo schermo sembra corretta. Evitate più contenitori main, section senza titolo e senza contenuto reale, nonché aside utilizzati solo per forzare una posizione laterale. Una struttura significativa deve sempre essere comprensibile prima di aggiungere il CSS.