Articolo originale: Semantic HTML5 Elements Explained
Gli elementi HTML semantici sono quegli elementi che descrivono espressamente il loro significato.
Elementi come <header>, <footer> e <article> sono considerati semantici perché descrivono precisamente lo scopo dell'elemento e il tipo di contenuto al loro interno.
Cosa sono gli elementi semantici?
L'HTML è stato originariamente creato come linguaggio di formattazione per definire i documenti all'inizio dell'avvento di internet. Con la crescita di internet, è stato adottato da sempre più persone, creando la necessità di cambiamenti.
Inizialmente, internet era stato ideato per condividere materiale di carattere scientifico, mentre adesso le persone lo utilizzano per molti altri scopi e desiderano che i loro siti web abbiano un bell'aspetto.
Dato che il web non è stato strutturato per il design, i programmatori hanno utilizzato diversi trucchetti per agire sull'aspetto estetico in vari modi. Invece di utilizzare i tag <table></table> per descrivere delle informazioni tramite una tabella, i programmatori li usavano per disporre altri elementi sulla pagina.
Con il progredire del design del layout, i programmatori hanno iniziato a utilizzare tag generici "non semantici" come <div>, attribuendo loro attributi class o id per descriverne lo scopo. Ad esempio, scrivendo <div class="header"> invece di <header>.
Visto che l'HTML5 è relativamente nuovo, questo uso degli elementi non semantici è attualmente ancora molto comune.
Lista dei nuovi elementi semantici
Gli elementi semantici aggiunti in HTML5 sono:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementi come <header>, <nav>, <section>, <article>, <aside> e <footer> agiscono più o meno come elementi <div>. Raggruppano in sezioni altri elementi all'interno della pagina. Però, mentre un <div> può contenere qualsiasi tipo di informazione, è semplice identificare il contenuto di un elemento semantico come <header>.
Perché usare elementi semantici?
Analizziamo i vantaggi dell'uso degli elementi semantici osservando due blocchi di codice HTML. Il primo blocco contiene elementi HTML semantici:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>Mentre il secondo utilizza elementi non semantici:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>Il primo risulta molto più leggibile. Questa è la prima cosa che puoi notare guardando il blocco con gli elementi semantici. È un semplice esempio, ma come programmatore, potresti aver bisogno di leggere centinaia o migliaia di righe di codice e un codice più semplice da leggere e capire, semplifica notevolmente il lavoro.
Inoltre, è più accessibile. Non sei il solo a trovare gli elementi semantici più facili da comprendere, infatti, anche i motori di ricerca e le tecnologie assistive (come lettori di schermo per utenti ipovedenti) sono in grado di avere una migliore comprensione del contesto e del contenuto dei siti web, fornendo una migliore esperienza per gli utenti.
Nel complesso, gli elementi semantici portano a un codice più coerente. Un programmatore può realizzare un'intestazione con elementi non semantici con <div class="header">, <div id="header">, <div class="head"> o semplicemente con <div>. Ci sono moltissimi modi di creare un'intestazione e la scelta dipende fondamentalmente dalla preferenza personale del programmatore. Un elemento semantico standard, rende tutto più semplice.
Dall'ottobre 2014, l'HTML4 è stato aggiornato a HTML5 e adesso contiene alcuni nuovi elementi semantici. In molti sono confusi dal gran numero di elementi diversi che non sembrano mostrare cambiamenti consistenti.
<section> e <article>
"Qual è la differenza?", ti starai chiedendo. Entrambi questi elementi vengono usati per dividere del contenuto in sezioni e possono essere usati in modo intercambiabile, a seconda della situazione. L'HTML4 offriva soltanto un tipo di elemento contenitore, ovvero il <div>. Nonostante sia ancora utilizzato, l'HTML5 fornisce gli elementi <section> e <article> che possono essere usati per sostituire un <div>.
Gli elementi <section> e <article> sono concettualmente simili e intercambiabili. Per decidere quale dei due utilizzare, considera che:
- Un
<article>è pensato per essere distribuibile indipendentemente o riutilizzabile. - Un
<section>consiste in raggruppamento tematico di contenuto.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section><header> e <hgroup>
L'elemento <header> è generalmente situato nella parte superiore di un documento, di una sezione o di un articolo e, di solito, contiene l'intestazione principale e alcuni strumenti di navigazione e ricerca.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>L'elemento <hgroup> dovrebbe essere usato se vuoi avere un'intestazione principale con una o più sotto-intestazioni.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>Ricorda che l'elemento <header> può avere qualsiasi contenuto, ma l'elemento <hgroup> può contenere soltanto altre intestazioni, cioè da <h1> a <h6>, <hgroup> incluso.
<aside>
L'elemento <aside> è pensato per del contenuto che non fa parte del flusso del testo in cui appare, ma vi è correlato in qualche modo. Pensa ad <aside> come a una barra laterale per il contenuto principale della pagina.
<aside>
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>Prima dell'HTML5, i menu venivano creati con elementi <ul> e <li>. Adesso, insieme a questi, possiamo separare gli oggetti menu con un <nav>, per navigare tra le pagine. Puoi avere un qualsiasi numero di elementi <nav> all'interno di una pagina. Ad esempio, è comune avere una barra di navigazione globale nella parte superiore (in un <header>) e una barra laterale di navigazione locale (in un elemento <aside>).
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav><footer>
Se c'è un <header>, deve esserci anche un <footer>. Il <footer> si trova generalmente nella parte inferiore di un documento, una sezione o un articolo. Proprio come per <header>, di solito, il suo contenuto è costituito da meta-informazioni come dettagli sull'autore, informazioni legali e/o link a informazioni inerenti. È possibile anche aggiungere elementi <section> all'interno del <footer>.
<footer>©Company A</footer><small>
L'elemento <small> appare spesso all'interno degli elementi <footer> o <aside> contenenti informazioni legati al copyright o note legali e altre postille. Comunque, non è pensato per rendere il testo più piccolo. Descrive soltanto il suo contenuto, senza influenzarne il layout.
<footer><small>©Company A</small> Date</footer><time>
L'elemento <time> permette di inserire una data ISO 8601 non ambigua in una versione facilmente leggibile da una persona.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>Perché preoccuparsi di <time>? Mentre le persone possono leggere l'ora e risalire al valore corretto attraverso il contesto, i computer leggono le date in formato ISO 8601, risalendo alla data, all'ora e al fuso orario.
<figure> e <figcaption>
L'elemento <figure> viene usato per racchiudere immagini e <figcaption> per assegnar loro una didascalia.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>