La semantica è lo studio dei significati di parole e frasi in lingua.
elementi semantici sono elementi con un significato.
Semantic HTML è l'uso di markup HTML per rinforzare la semantica, o significato, di informazioni nel pagine web e applicazioni web piuttosto che limitarsi a definire la sua presentazione o guardare.
Semantic HTML viene elaborato dai browser web tradizionali, così come da molti altri user agent. CSS è usato per suggerire la sua presentazione a utenti umani.
Quali sono elementi semantici?
Un elemento semantico descrive chiaramente il suo significato sia per il browser e lo sviluppatore.
Esempi di elementi non semantici: <div> e <span> - dice nulla circa il suo contenuto.
Esempi di elementi semantici: <form> , <table> e <img> - definisce chiaramente il suo contenuto.
Supporto browser
| sì | sì | sì | sì | sì |
HTML5 elementi semantici sono supportati in tutti i browser moderni.
Inoltre, è possibile "teach" i vecchi browser come gestire "unknown elements" .
Leggi in Supporto browser HTML5 .
Nuovi elementi semantici in HTML5
Molti siti web contengono codice HTML come: <div id="nav"> <div class="header"> <div id="footer">
per indicare la navigazione, intestazione e piè di pagina.
HTML5 offre nuovi elementi semantici per definire diverse parti di una pagina web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Element
La <section> elemento definisce una sezione di un documento.
Secondo la documentazione HTML5 del W3C: "A section is a thematic grouping of content, typically with a heading."
home page di un sito Web potrebbe essere diviso in sezioni per l'introduzione, il contenuto e le informazioni di contatto.
Esempio
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> Prova tu stesso " HTML5 <article> Element
Il <article> elemento specifica, contenuti indipendenti autosufficiente.
Un articolo dovrebbe dare un senso di per sé, e dovrebbe essere possibile leggere in modo indipendente dal resto del sito web.
Esempi di dove un <article> può essere utilizzato elemento:
- post sul forum
- Post sul blog
- Articolo di giornale
Esempio
<article>
<h1>What Does WWF Do?</h1>
<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> Prova tu stesso " Elementi semantici estraibili
Nello standard HTML5, il <article> elemento definisce un blocco completo, autonomo di elementi correlati.
La <section> elemento è definito come un blocco di elementi correlati.
Possiamo utilizzare le definizioni per decidere come elementi nido? No, non possiamo!
Su Internet, troverete pagine HTML con <section> elementi contenenti <article> elementi, e <article> elementi contenenti <sections> elementi.
Troverete anche le pagine con <section> elementi contenenti <section> elementi, e <article> elementi contenenti <article> elementi.
Giornale: The Sports articles negli sport section , hanno una tecnica section in ogni article .
HTML5 <header> Element
Il <header> elemento specifica un'intestazione per un documento o sezione.
Il <header> elemento deve essere utilizzato come contenitore per il contenuto introduttiva.
Si possono avere diverse <header> elementi in un unico documento.
L'esempio seguente definisce un'intestazione per un articolo:
Esempio
<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> Prova tu stesso " HTML5 <footer> Element
Il <footer> elemento specifica un piè di pagina di un documento o della sezione.
Un <footer> elemento dovrebbe contenere informazioni sul suo elemento che contiene.
A piè di pagina contiene in genere l'autore del documento, informazioni, copyright, i collegamenti ai termini di utilizzo, le informazioni di contatto, etc.
Si possono avere diverse <footer> elementi in un unico documento.
Esempio
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> Prova tu stesso " HTML5 <nav> Element
Il <nav> elemento definisce un insieme di link di navigazione.
Il <nav> elemento è destinato a grandi blocchi di link di navigazione. Tuttavia, non tutti i link in un documento dovrebbe essere all'interno di un <nav> elemento!
Esempio
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Prova tu stesso " HTML5 <aside> Element
Il <aside> elemento definisce alcuni contenuti a parte il contenuto è posto in (like a sidebar) .
La parte contenuti devono essere correlati al contenuto circostante.
Esempio
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside> Prova tu stesso " HTML5 <figure> e <figcaption> Elementi
Nei libri e giornali, è comune avere le didascalie con immagini.
Lo scopo di una didascalia è quello di aggiungere una spiegazione visiva a un'immagine.
Con HTML5, le immagini e le didascalie possono essere raggruppati insieme in <figure> elementi:
Esempio
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> Prova tu stesso " Il <img> elemento definisce l'immagine, il <figcaption> elemento definisce la didascalia.
Perché semantica HTML5 Elements?
Con HTML4, gli sviluppatori usati attribuiscono loro preferito nomi di elementi della pagina di stile:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Ciò ha reso impossibile per i motori di ricerca per identificare il contenuto della pagina web corretta.
Con gli elementi HTML5, come: <header> <footer> <nav> <section> <article> , questo diventerà più facile.
Secondo il W3C, Web Semantico:
"Consente ai dati di essere condivisi e riutilizzati attraverso le applicazioni, le imprese e le comunità."
considerazioni
Nei casi in cui un documento richiede una semantica più precisi rispetto a quelli espressi in soli HTML, frammenti del documento possono essere racchiusi all'interno di campata o div elementi con nomi di classe significativi come ad esempio <span class = "author"> e <div class = "fattura" >. Se tali nomi delle classi sono anche un identificatore di frammento all'interno di uno schema o un ontologia, essi possono creare un collegamento a un significato più definito. Microformati formalizzare questo approccio alla semantica in HTML.
Una importante limitazione di questo approccio è che tale markup basato su elemento inclusione deve soddisfare le condizioni ben formati. Dal momento che questi documenti sono in linea di massima con struttura ad albero, questo significa che i frammenti solo bilanciati da un sotto-albero possono essere contrassegnati in questo modo. Un dispositivo marcatore-up qualsiasi sezione arbitraria di HTML richiederebbe un meccanismo indipendente dalla struttura marcatura stessa, come XPointer.
Buona semantica HTML migliora anche l'accessibilità dei documenti web (vedi anche Modalità accessibile sul web). [Citazione necessaria] Ad esempio, quando un lettore di schermo o un browser audio può accertare correttamente la struttura di un documento, non sprecare l'utente non vedente tempo leggendo le informazioni ripetute o irrilevante quando è stata contrassegnata in modo corretto.
Elementi semantici in HTML5
Di seguito è riportato un elenco alfabetico dei nuovi elementi semantici in HTML5.
I collegamenti vanno al nostro completo HTML5 di riferimento .
| Etichetta | Descrizione |
|---|---|
| <article> | Definisce un articolo |
| <aside> | Definisce il contenuto a parte il contenuto della pagina |
| <details> | Definisce dettagli aggiuntivi che l'utente può visualizzare o nascondere |
| <figcaption> | Definisce una didascalia per un <figure> elemento |
| <figure> | Specifica il contenuto self-contained, come illustrazioni, diagrammi, foto, elenchi di codici, etc. |
| <footer> | Definisce un piè di pagina di un documento o di una sezione |
| <header> | Specifica un'intestazione per un documento o sezione |
| <main> | Specifica il contenuto principale di un documento |
| <mark> | Definisce segnato text / evidenziato |
| <nav> | Definisce link di navigazione |
| <section> | Definisce una sezione in un documento |
| <summary> | Definisce un'intestazione visibile per un <details> elemento |
| <time> | Definisce una data / ora |