📢 Nuovo Corso Tailwind Completo disponibile!

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>

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>