Elementi Semantici HTML

Cosa sono gli elementi semantici?

Un elemento semantico descrive chiaramente il suo significato sia per il browser che per lo sviluppatore.

Esempi di elementi non semantici: <div> e <span> - Non forniscono alcuna informazione sul loro contenuto.

Esempi di elementi semantici: <form>, <table> e <article> - Definiscono chiaramente il loro contenuto.

Elementi Semantici in HTML

Molti siti web contengono codice HTML come: <div id="nav"> <div class="header"> <div id="footer"> per indicare la navigazione, l’intestazione e il piè di pagina.

In HTML ci sono alcuni elementi semantici che possono essere utilizzati per definire diverse parti di una pagina web:

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

Elemento HTML <section>

L’elemento <section> definisce una sezione all’interno di un documento.

Secondo la documentazione HTML del W3C: “Una sezione è un raggruppamento tematico di contenuti, tipicamente con un’intestazione.”

Esempi di dove può essere utilizzato l’elemento <section>:

• Capitoli
• Introduzione
• Articoli di notizie
• Informazioni di contatto

Una pagina web potrebbe essere normalmente suddivisa in sezioni per introduzione, contenuto e informazioni di contatto.

<section>
  <h1>WWF</h1>
  <p>
    Il World Wide Fund for Nature (WWF) è un'organizzazione internazionale che
    si occupa di questioni legate alla conservazione, alla ricerca e al
    ripristino dell'ambiente, precedentemente conosciuta come World Wildlife
    Fund. Il WWF è stato fondato nel 1961.
  </p>
</section>
<section>
  <h1>Simbolo del Panda del WWF</h1>
  <p>
    Il panda è diventato il simbolo del WWF. Il ben noto logo del panda del WWF
    ha avuto origine da un panda di nome Chi Chi che è stato trasferito dallo
    Zoo di Pechino allo Zoo di Londra nello stesso anno della fondazione del
    WWF.
  </p>
</section>

Elemento HTML <article>

L’elemento <article> specifica contenuti indipendenti e autonomi.

Un articolo dovrebbe avere senso di per sé ed essere distribuibile autonomamente rispetto al resto del sito web.

Esempi di dove può essere utilizzato l’elemento <article>:

• Messaggi nei forum
• Articoli di blog
• Commenti degli utenti
• Schede prodotto
• Articoli di giornale

<article>
  <h2>Google Chrome</h2>
  <p>
    Google Chrome è un browser web sviluppato da Google, lanciato nel 2008.
    Chrome è il browser web più popolare al mondo oggi!
  </p>
</article>
<article>
  <h2>Mozilla Firefox</h2>
  <p>
    Mozilla Firefox è un browser web open-source sviluppato da Mozilla. Firefox
    è stato il secondo browser web più popolare dal gennaio 2018.
  </p>
</article>
<article>
  <h2>Microsoft Edge</h2>
  <p>
    Microsoft Edge è un browser web sviluppato da Microsoft, lanciato nel 2015.
    Microsoft Edge ha sostituito Internet Explorer.
  </p>
</article>

Elemento HTML <header>

L’elemento <header> rappresenta un contenitore per il contenuto introduttivo o un insieme di link di navigazione.

Un elemento <header> contiene tipicamente:

• uno o più elementi di intestazione (<h1> - <h6>)
• logo o icona
• informazioni sull’autore Nota: Puoi avere diversi elementi <header> in un singolo documento HTML. Tuttavia, <header> non può essere inserito all’interno di un elemento <footer>, <address> o un altro elemento <header>.

<article>
  <header>
    <h1>Cosa fa il WWF?</h1>
    <p>Missione del WWF:</p>
  </header>
  <p>
    La missione del WWF è fermare la degradazione dell'ambiente naturale del
    nostro pianeta, e costruire un futuro in cui gli esseri umani vivano in
    armonia con la natura.
  </p>
</article>

Elemento HTML <footer>

L’elemento <footer> definisce un piè di pagina per un documento o una sezione.

Un elemento <footer> contiene tipicamente:

• informazioni sull’autore
• informazioni sul copyright
• informazioni di contatto
• mappa del sito (sitemap)
• link per tornare in alto
• documenti correlati

Puoi avere diversi elementi <footer> in un singolo documento.

<footer>
  <p>Autore: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Elemento HTML <nav>

L’elemento <nav> definisce un insieme di link di navigazione.

Nota che NON tutti i link di un documento dovrebbero essere all’interno di un elemento <nav>. L’elemento <nav> è destinato solo a blocchi principali di link di navigazione.

I browser, come i lettori di schermo per utenti disabili, possono utilizzare questo elemento per determinare se omettere il rendering iniziale di questo contenuto.

<nav>
  <a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Elemento HTML <aside>

L’elemento <aside> definisce un contenuto che è separato dal contenuto circostante (come una barra laterale).

Il contenuto dell’elemento <aside> dovrebbe essere indirettamente correlato al contenuto circostante.

<p>
  La mia famiglia ed io abbiamo visitato il centro Epcot quest'estate. Il tempo
  era bello ed Epcot è stato incredibile! Ho trascorso un'estate fantastica con
  la mia famiglia!
</p>
<aside>
  <h4>Centro Epcot</h4>
  <p>
    Epcot è un parco a tema presso il Walt Disney World Resort che offre
    emozionanti attrazioni, padiglioni internazionali, fuochi d'artificio
    premiati ed eventi speciali stagionali.
  </p>
</aside>

Elementi HTML <figure> e <figcaption>

Il tag <figure> specifica un contenuto autosufficiente, come illustrazioni, diagrammi, foto, listati di codice, ecc.

Il tag <figcaption> definisce una didascalia per un elemento <figure>. L’elemento <figcaption> può essere posizionato come primo o ultimo figlio di un elemento <figure>.

L’elemento <img> definisce l’immagine o l’illustrazione effettiva.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" />
  <figcaption>Fig1. - Trulli, Puglia, Italia.</figcaption>
</figure>