Elementi semantici in HTML5
Gli elementi semantici definiscono chiaramente il loro scopo nella pagina, rendendo il markup più comprensibile per browser e sviluppatori.
Gli elementi semantici sono una delle introduzioni più significative di HTML5. Nelle versioni precedenti di HTML, per strutturare una pagina web si utilizzava il generico tag <div> con un attributo id o class. Ad esempio, per definire barre laterali, footer, menu o altri blocchi strutturali, si usava il tag <div> con il significato corrispondente (div class="footer").
Gli elementi semantici in HTML hanno un significato intrinseco e trasmettono tale significato sia al browser che allo sviluppatore. Definiscono chiaramente il tipo di contenuto che contengono (ad esempio, il tag <footer> viene utilizzato al posto di <div id="footer">). Aiutano inoltre a migliorare l'accessibilità e rendono il markup più facile da interpretare per i motori di ricerca.
Questa pagina tratta gli elementi semantici strutturali (per il layout di pagina) che utilizzerai per costruire lo scheletro di quasi ogni pagina web — <header>, <nav>, <main>, <article>, <section>, <aside> e <footer> — oltre ad alcuni tag semantici a livello di contenuto. Mostra anche come questi elementi si mappano sui landmark ARIA, che è il vero motivo per cui sono importanti per l'accessibilità.
Vediamo gli elementi semantici e il loro significato.
Un layout di pagina semantico completo
Prima di esaminare ogni elemento singolarmente, è utile vedere come si combinano tra loro. Gli elementi strutturali si annidano in modo prevedibile: un <header> e un <footer> racchiudono la pagina, un singolo <main> contiene il contenuto principale, e al suo interno un <article> può stare accanto a un <aside> correlato. La navigazione vive in <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>Il resto di questa pagina spiega ogni elemento a turno.
Elementi semantici e landmark ARIA
Il maggiore vantaggio pratico degli elementi semantici strutturali è l'accessibilità. Gli utenti di screen reader non scorrono una pagina dall'alto verso il basso — saltano tra i landmark. Molti elementi strutturali espongono automaticamente un ruolo ARIA landmark implicito, quindi lo si ottiene gratuitamente semplicemente usando il tag corretto (nessun attributo role necessario):
| Elemento | Ruolo landmark implicito | Note |
|---|---|---|
<header> (figlio diretto di <body>) | banner | Header a livello di sito. Un <header> all'interno di <article>/<section> non è un landmark. |
<nav> | navigation | Usa aria-label per etichettare più nav e renderle distinguibili. |
<main> | main | Usane solo uno per pagina. |
<aside> | complementary | Contenuto correlato al contenuto principale, ma separabile da esso. |
<footer> (figlio diretto di <body>) | contentinfo | Footer a livello di sito (copyright, contatti, ecc.). |
Per questo motivo, sostituire <div class="header"> con <header> non è solo un markup più ordinato — rende la pagina navigabile per le persone che utilizzano tecnologie assistive.
L'elemento <header>
L'elemento <header> definisce un'intestazione per il documento o la sezione. Di solito contiene un logo, una barra di ricerca, link di navigazione, ecc.
Esempio dell'elemento HTML <header>
Esempio dell'header HTML della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>L'elemento <nav>
L'elemento <nav> definisce un blocco di link di navigazione, sia all'interno del documento corrente che verso altri documenti. Si noti che non tutti i link nel documento HTML possono essere inseriti nell'elemento <nav>; può includere solo i blocchi di navigazione principali. Ad esempio, il tag <nav> può essere inserito anche nel tag <footer> per definire i link nel footer del sito.
Esempio dell'elemento HTML <nav>
Esempio dell'elemento nav della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>L'elemento <article>
L'elemento <article> viene utilizzato per specificare un contenuto indipendente e autonomo (articoli, post di blog, commenti, ecc.). Il contenuto dell'elemento ha un suo significato ed è facilmente distinguibile dal resto del contenuto della pagina web.
Esempio dell'elemento HTML <article>
Esempio dell'elemento article della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>L'elemento <section>
L'elemento <section> viene utilizzato per raggruppare sezioni autonome all'interno di una pagina web che contengono contenuti logicamente correlati (blocco di notizie, informazioni di contatto, ecc.).
Esempio dell'elemento HTML <section>
Esempio dell'elemento section della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
Questi due elementi sono facili da confondere. Una regola pratica rapida:
- Usa
<article>quando il contenuto è autonomo e distribuibile indipendentemente — avrebbe ancora senso da solo, fuori contesto (un post di blog, una notizia, una scheda prodotto, un singolo commento utente). Se potresti immaginarlo distribuito in un feed RSS, è un<article>. - Usa
<section>per un raggruppamento tematico di contenuti correlati che fa parte di qualcosa di più ampio e non ha significato autonomo. Un<section>dovrebbe quasi sempre iniziare con un'intestazione (<h2>–<h6>) che nomina il gruppo.
Quando nessuno dei due si applica — hai solo bisogno di un wrapper di stile o layout senza significato semantico — usa un semplice <div>.
L'elemento <aside>
L'elemento <aside> definisce una sezione con informazioni aggiuntive correlate al contenuto che circonda l'elemento <aside>. Viene generalmente utilizzato per arricchire un articolo con informazioni supplementari, o per evidenziare le parti che possono essere interessanti per l'utente.
Esempio dell'elemento HTML <aside>
Esempio dell'elemento aside della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>L'elemento <footer>
L'elemento <footer> definisce il footer di una pagina web o di una sezione. Di norma contiene informazioni sul copyright, dettagli di contatto, link di navigazione, ecc.
Esempio dell'elemento HTML <footer>
Esempio dell'elemento footer della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>L'elemento <address>
L'elemento <address> fornisce informazioni di contatto per l'antenato <article> più vicino, oppure per l'intero documento quando è figlio di <body>. È destinato ai dettagli di contatto (l'autore o il proprietario dell'articolo o del sito) — non per indirizzi postali arbitrari che fanno semplicemente parte del contenuto.
Esempio dell'elemento HTML <address>
Esempio dell'elemento address della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Invia un'email all'autore
L'elemento <main>
L'elemento <main> definisce il contenuto principale della pagina. Il contenuto del tag <main> deve essere unico e non deve duplicare blocchi dello stesso tipo che si ripetono in altri documenti, come l'intestazione del sito, il footer, il menu, la ricerca, le informazioni sul copyright, ecc.
Esempio dell'elemento HTML <main>
Esempio dell'elemento main della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>L'elemento <figure>
L'elemento <figure> viene utilizzato per indicare contenuto autonomo. Il tag può includere immagini, diagrammi, illustrazioni, esempi di codice, ecc.
Esempio dell'elemento HTML <figure>
Esempio dell'elemento figure della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>L'elemento <figcaption>
L'elemento <figcaption> viene utilizzato per aggiungere una firma o un'annotazione al tag <figure>.
Esempio dell'elemento HTML <figcaption>
Esempio dell'elemento figcaption della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Elementi semantici a livello di contenuto
Gli elementi sopra descritti definiscono la struttura di una pagina. I seguenti tag aggiungono significato a livello di testo — marcano piccole porzioni di contenuto all'interno di un paragrafo, anziché definire il layout della pagina. Non sono landmark e non influenzano la struttura della pagina.
L'elemento <time>
L'elemento <time> definisce un orario leggibile dall'uomo su un orologio a 24 ore o una data precisa nel calendario gregoriano.
Esempio dell'elemento HTML <time>
Esempio dell'elemento time della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>L'elemento <mark>
L'elemento <mark> viene utilizzato per marcare una parte del testo che ha rilevanza. Può essere usato per evidenziare un testo per mostrare enfasi, evidenziare i termini di ricerca nei risultati per fornire contesto, o distinguere un nuovo contenuto aggiunto dall'utente mostrandolo in modo diverso.
Esempio dell'elemento HTML <mark>
Esempio dell'elemento mark della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>L'elemento <bdi>
L'elemento <bdi> viene utilizzato per isolare il testo bidirezionale quando una lingua con direzionalità da destra a sinistra, come l'arabo o l'ebraico, viene usata inline con lingue da sinistra a destra.
Esempio dell'elemento HTML <bdi>
Esempio dell'elemento bdi della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>L'elemento <wbr>
Il tag <wbr> viene utilizzato per indicare al browser dove può essere inserito un a-capo nel testo. A differenza del tag <br>, che obbliga il browser a inserire un a-capo, nel caso di <wbr> il browser analizza prima il contenuto e poi inserisce un a-capo se necessario (parola o indirizzo URL troppo lungo).
Esempio dell'elemento HTML <wbr>
Esempio dell'elemento wbr della pagina|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>