Elementi semantici HTML5

La semantica (derivata dal greco antico) può essere definita come lo studio del significato del linguaggio.

Gli elementi semantiche sono elementi con un significato.

Cos'è un elemento semantiche?

Gli elementi semantiche descrivono chiaramente il loro significato sia ai browser che agli sviluppatori.

Non semanticheEsempi di elementi: <div> e <span> - non possono fornire informazioni sul loro contenuto.

SemanticheEsempi di elementi: <form>, <table> e <img> - definiscono chiaramente il loro contenuto.

Supporto del browser

Sì Sì Sì Sì Sì

Tutti i browser moderni supportano gli elementi semantiche di HTML5.

Inoltre, puoi aiutare i browser obsoleti a gestire gli "elementi sconosciuti".

Per saperne di più su questo capitolo, visita il browser HTML5.

Nuovi elementi semantiche in HTML5

Molti siti includono codice HTML per indicazioni di navigazione, intestazione e piè di pagina, ad esempio: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 fornisce nuovi elementi semantiche per definire le diverse parti della pagina:

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

Elementi semantici HTML5

Elementi semantici HTML5

L'elemento <section> di HTML5

L'elemento <section> definisce una sezione del documento.

Secondo la documentazione HTML del W3C: "Una sezione (section) è un gruppo di contenuti con un tema, di solito con un titolo."

Può dividere la pagina iniziale del sito in sezioni come introduzione, contenuto, informazioni di contatto e altro.

Esempio

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

Prova a farlo tu stesso

Elemento <article> di HTML5

L'elemento <article> definisce un contenuto autonomo e self-contenuto.

Un documento ha un significato autonomo e può essere letto indipendentemente dal contenuto del sito.

Applicazioni dell'elemento <article>:

  • Forum
  • Blog
  • Notizie

Esempio

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

Prova a farlo tu stesso

Elementi semantici nidificati

Secondo lo standard HTML5, l'elemento <article> definisce un blocco di contenuto autonomo e correlato.

L'elemento <section> è definito come un blocco di elementi correlati.

Possiamo utilizzare questa definizione per decidere come nidificare gli elementi? No, non possiamo!

Sul web, troverai pagine HTML con elementi <section> che contengono elementi <article>, e pagine con elementi <article> che contengono elementi <sections>.

Troverai anche elementi <section> che contengono elementi <section>, e elementi <article> che contengono elementi <sections>.

Elemento <header> di HTML5

L'elemento <header> definisce un'intestazione per un documento o un paragrafo.

L'elemento <header> dovrebbe essere utilizzato come contenitore per contenuti introduttivi.

Un documento può avere più elementi <header>.

Ecco un esempio di un documento che definisce un'intestazione:

Esempio

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

Prova a farlo tu stesso

Elemento <footer> di HTML5

L'elemento <footer> definisce un piè di pagina per un documento o un paragrafo.

L'elemento <footer> dovrebbe fornire informazioni sugli elementi contenuti.

I piè di pagina contengono solitamente informazioni sull'autore del documento, informazioni sul copyright, link ai termini di utilizzo, informazioni di contatto, ecc.

Puoi utilizzare più elementi <footer> in un documento.

Esempio

<footer>
   <p>Pubblicato da: Hege Refsnes</p>
   <p>Informazioni di contatto: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Prova a farlo tu stesso

L'elemento HTML5 <nav>

L'elemento <nav> definisce una raccolta di link di navigazione.

L'elemento <nav> è progettato per definire grandi blocchi di link di navigazione. Tuttavia, non tutti i link nel documento dovrebbero essere posizionati all'interno dell'elemento <nav>!

Esempio

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

Prova a farlo tu stesso

L'elemento HTML5 <aside>

L'elemento <aside> contiene某些内容（ad esempio, la barra laterale）al di fuori del contenuto principale della pagina.

Il contenuto di aside dovrebbe essere correlato al contenuto circostante.

Esempio

<p>La mia famiglia e io abbiamo visitato il centro Epcot quest'estate.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>Il Epcot Center è un parco a tema nel Disney World, Florida.</p>
</aside>

Prova a farlo tu stesso

Gli elementi HTML5 <figure> e <figcaption>

Nei libri e nei giornali, è comune trovare didascalie accanto alle immagini.

Il ruolo della didascalia (caption) è aggiungere una spiegazione visibile all'immagine.

Con HTML5, immagine e titolo possono essere combinati in <figure> nello stato dell'elemento:

Esempio

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Prova a farlo tu stesso

<img> L'elemento definisce l'immagine,<figcaption> L'elemento definisce il titolo.

Perché utilizzare gli elementi HTML5?

Se si utilizza HTML4, gli sviluppatori utilizzeranno i loro nomi di attributo preferiti per impostare lo stile degli elementi della pagina:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

In questo modo, il browser non può riconoscere il contenuto del sito web corretto.

E attraverso gli elementi HTML5 come: <header> <footer> <nav> <section> <article>, questo problema viene risolto.

Secondo W3C, Semantic Web:

“Permette la condivisione e la riutilizzazione dei dati tra applicazioni, aziende e gruppi.”

Elementi semantici HTML5

Di seguito è riportata una lista di elementi semantici HTML5 nuovi ordinati alfabeticamente.

Questi link puntano al manuale di riferimento HTML completo.

Tag Descrizione
<article> Definire un articolo.
<aside> Definire il contenuto al di fuori della pagina.
<details> Definire dettagli aggiuntivi visibili o nascosti dall'utente.
<figcaption> Definire il titolo dell'elemento <figure>.
<figure> Definire il contenuto contenuto nel contesto.
<footer> Definire il piè di pagina del documento o della sezione.
<header> Definire l'intestazione del documento o della sezione.
<main> Definire il contenuto principale del documento.
<mark> Definire il testo importante o enfatizzato.
<nav> Definire i link di navigazione.
<section> Definire la sezione del documento.
<summary> Definire il titolo visibile dell'elemento <details>.
<time> Definire la data/ora.