Elementi semantici HTML
Elementi semantici = elementi con un significato.
Cosa sono gli elementi semantici?
Un elemento semantico ne descrive chiaramente il significato sia per il browser che per lo sviluppatore.
Esempi di elementi non semantici : <div>e <span>- Non dice nulla sul suo contenuto.
Esempi di elementi semantici : <form>, <table>, e <article>- Definisce chiaramente il suo contenuto.
Elementi semantici in HTML
Molti siti web contengono codice HTML come: <div id="nav"> <div class="header"> <div id="footer"> per indicare navigazione, intestazione e piè di pagina.
In HTML ci sono alcuni elementi semantici che possono essere usati per definire diverse parti di una pagina web:
- <articolo>
- <a parte>
- <dettagli>
- <didascalia figura>
- <figura>
- <piè di pagina>
- <intestazione>
- <principale>
- <segno>
- <navigazione>
- <sezione>
- <riassunto>
- <tempo>
Elemento HTML <sezione>
L' <section>elemento definisce una sezione in un documento.
Secondo la documentazione HTML del W3C: "Una sezione è un raggruppamento tematico di contenuti, in genere con un'intestazione".
Esempi di dove <section>è possibile utilizzare un elemento:
- Capitoli
- introduzione
- Articoli di notizie
- Informazioni sui contatti
Una pagina Web potrebbe normalmente essere suddivisa in sezioni per l'introduzione, il contenuto e le informazioni di contatto.
Esempio
Due sezioni in un documento:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
Elemento HTML <articolo>
L' <article>elemento specifica contenuto indipendente e autonomo.
Un articolo dovrebbe avere un senso da solo e dovrebbe essere possibile distribuirlo indipendentemente dal resto del sito web.
Esempi di dove l' <article>elemento può essere utilizzato:
- Messaggi del forum
- I post del blog
- Commenti degli utenti
- Schede prodotto
- Articoli di giornale
Esempio
Tre articoli dal contenuto indipendente e autonomo:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Esempio 2
Usa i CSS per definire lo stile dell'elemento <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
Annidare <articolo> in <sezione> o viceversa?
L' <article>
elemento specifica contenuto indipendente e autonomo.
L' <section>elemento definisce la sezione in un documento.
Possiamo usare le definizioni per decidere come annidare quegli elementi? No, non possiamo!
Quindi, troverai pagine HTML con <section>elementi contenenti <article>elementi ed <article>elementi contenenti <section>elementi.
Elemento HTML <intestazione>
L' <header>elemento rappresenta un contenitore per il contenuto introduttivo o un insieme di collegamenti di navigazione.
Un <header>elemento in genere contiene:
- uno o più elementi di intestazione (<h1> - <h6>)
- logo o icona
- informazioni sulla paternità
Nota: puoi avere più <header>elementi in un documento HTML. Tuttavia, <header>non può essere posizionato all'interno di un <footer>elemento <address>o di un altro <header>elemento.
Esempio
Un'intestazione per un <articolo>:
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
Elemento HTML <piè di pagina>
L' <footer>elemento definisce un piè di pagina per un documento o una sezione.
Un <footer>elemento in genere contiene:
- informazioni sulla paternità
- informazioni sul copyright
- informazioni sui contatti
- Mappa del sito
- torna ai link in alto
- documenti correlati
Puoi avere più <footer>elementi in un documento.
Esempio
Una sezione a piè di pagina in un documento:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Elemento HTML <nav>
L' <nav>elemento definisce un insieme di collegamenti di navigazione.
Si noti che NON tutti i collegamenti di un documento devono trovarsi all'interno di un <nav>elemento. L'
<nav>elemento è inteso solo per il blocco principale dei collegamenti di navigazione.
I browser, come le utilità per la lettura dello schermo per utenti disabili, possono utilizzare questo elemento per determinare se omettere il rendering iniziale di questo contenuto.
Esempio
Una serie di link di navigazione:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Elemento HTML <a parte>
L' <aside>elemento definisce alcuni contenuti oltre al contenuto in cui è posizionato (come una barra laterale).
Il <aside>contenuto dovrebbe essere indirettamente correlato al contenuto circostante.
Esempio
Visualizza alcuni contenuti oltre a quelli in cui è posizionato:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Esempio 2
Usa CSS per dare uno stile all'elemento <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Elementi HTML <figura> e <figcaption>
Il <figure>tag specifica contenuto autonomo, come illustrazioni, diagrammi, foto, elenchi di codici, ecc.
Il <figcaption>tag definisce una didascalia per un <figure>elemento. L' <figcaption>elemento può essere posizionato come il primo o l'ultimo figlio di un <figure>elemento.
L' <img>elemento definisce l'immagine/illustrazione reale.
Esempio
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
Perché gli elementi semantici?
Secondo il W3C: "Un Web semantico consente di condividere e riutilizzare i dati tra applicazioni, aziende e comunità".
Elementi semantici in HTML
Di seguito è riportato un elenco di alcuni degli elementi semantici in HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .