Agli albori del linguaggio HTML non era presente nessuna convezione globalmente accettata per definire la struttura degli elementi all'interno della pagina. Ogni sviluppatore utilizzava la sua tecnica personale: c'era chi faceva largo utilizzo dell'attributo id e chi non lo utilizzava affatto, chi utilizzava solo le classi e chi faceva un mix di entrambi.

<div class="container">
  <div class="main"></div>
  <div class="sidebar"></div>
</div>

<div id="container">
  <div id="main"></div>
  <div id="sidebar"></div>
</div>

<div class="container">
  <div id="main"></div>
  <div id="sidebar"></div>
</div>

A lungo andare questa assenza di linee guida ha iniziato a creare non pochi problemi sia agli sviluppatori, per quanto riguarda l'organizzazione del codice, sia ai motori di ricerca che faticavano a capire il contenuto dei vari blocchi.

Per risolvere questo problema con l'avvento di HTML5 sono stati introdotti diversi tag semantici; in realtà la maggior parte non differiscono molto dal un semplice <div> per quanto riguarda la parte tecnica, ma sono un enorme passo avanti per gli sviluppatori che possono organizzare meglio il loro codice e per i motori di ricerca che finalmente sono in grado di catalogare ed indicizzare i vari contenuti con maggiore facilità. L'introduzione di questi nuovi tag ha permesso inoltre a strumenti particolari, come gli screen reader, di capire il tipo dei vari elementi in modo tale da mostrarli correttamente.

I tag semantici principali sono:

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

Article

L'elemento <article> viene solitamente utilizzato per le sezioni ripetute di un sito

<article>
  <h1>HTML5 e i tag semantici</h1>
  <p>Agli albori del linguaggio HTML non era presente nessuna convezione....</p>
</article>

Aside

L'elemento <aside> rappresenta una parte della pagina di supporto a quella principale, solitamente viene utilizzato per la sidebar

<aside>
  <h4>Sidebar</h4>
  <section>
    <p>Widget</p>
  </section>
</aside>

Details

L'elemento <details> rappresenta una serie di dettagli che l'utente può mostrare/nascondere

<details>Testo importante</details>

Figure & Figcaption

Gli elementi <figure> e <figcaption> vengono utilizzati per mostrare un'immagine e la relativa descrizione

<figure>
  <img src="image.jpg" alt="Image" />
  <figcaption>Descrizione dell'immagine</figcaption>
</figure>

Footer

L'elemento <footer> viene utilizzato per le note alla fine della sezione

<footer>
  <p>Copyright © 2020 All rights reserved</p>
</footer>

Header

L'elemento <header> rappresenta la testata della sezione

<header>
  <h1>VueJS</h1>
  <h3>Che cos'è VueJS?</h3>
  <p>Oggi parleremo di VueJS</p>
</header>

Main

L'elemento <main> viene utilizzato per la parte principale della pagina

<main>
  <h1>Titolo</h1>
  <p>Blocco di testo</p>
</main>

Mark

L'elemento <mark> viene utilizzato per evidenziare un testo

<mark>Testo importante</mark>

Nav

L'elemento <nav> viene utilizzato per i menu di navigazione

<nav>
  <ul>
    <li><a href="https://extelos.com/home">Home</a></li>
    <li><a href="https://extelos.com/blog">Blog</a></li>
    <li><a href="https://extelos.com/learn">Corsi</a></li>
    <li><a href="https://extelos.com/projects">Progetti</a></li>
  </ul>
</nav>

Section

L'elemento <section> rappresenta le varie sezioni della pagina

<section>
  <h1>Titolo della sezione</h1>
  <p>Blocco di testo</p>
  <img src="image.jpg" alt="immagine" />
</section>

Summary

L'elemento <summary> viene utilizzato insieme all'elemento <details> per i titoli d'intestazione

<summary>Sommario</summary>

Time

L'elemento <time> viene utilizzato per indicare una data

<time datetime="2020-02-10">20 febbraio 2020</time>