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.
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
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>
.
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.
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.
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.
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.