Semantica este studiul sensurilor de cuvinte și expresii în limba.
Elementele semantice sunt elemente cu un sens.
Care sunt elementele semantice?
Un element semantic descrie în mod clar sensul său atât browser-ul și dezvoltator.
Exemple de elemente de bază non-semantice: <div> și <span> - spune nimic despre conținutul său.
Exemple de elemente semantice: <form> , <table> și <img> - definește clar conținutul său.
Suport pentru browser-
| da | da | da | da | da |
HTML5 elemente semantice sunt acceptate în toate browserele moderne.
În plus, aveți posibilitatea să "teach" browsere mai vechi cum să se ocupe de "unknown elements" .
Citiți despre aceasta în HTML5 Suport browser .
Noi Elemente semantice în HTML5
Multe site - uri web conțin cod HTML cum ar fi: <div id="nav"> <div class="header"> <div id="footer">
pentru a indica navigare, antet și subsol.
HTML5 oferă noi elemente semantice pentru a defini diferite părți ale unei pagini web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Element
<section> Element definește o secțiune într - un document.
Conform documentației HTML5 W3C: "A section is a thematic grouping of content, typically with a heading." în "A section is a thematic grouping of content, typically with a heading."
Pagina de start Un site web ar putea fi împărțită în secțiuni pentru introducerea, conținutul și informațiile de contact.
Exemplu
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
Încearcă - l singur » HTML5 <article> Element
<article> Elementul specifică conținut independent, autonom.
Un articol ar trebui să aibă sens pe cont propriu, și ar trebui să fie posibil să-l citească în mod independent de restul site-ului.
Exemple de unde un <article> poate fi utilizat elementul:
- post pe forum
- Postare pe blog
- Articol de ziar
Exemplu
<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>
Încearcă - l singur » Elemente semantice Cuiburi
În standardul HTML5, <article> elementul definește un bloc complet, autonom de elemente conexe.
<section> Elementul este definit ca un bloc de elemente conexe.
Putem folosi definițiile pentru a decide cum să elemente cuib? Nu, nu putem!
Pe Internet, veți găsi pagini HTML cu <section> elemente care conțin <article> elemente, și <article> elemente care conțin <sections> elemente.
Veți găsi , de asemenea pagini cu <section> elemente care conțin <section> elemente, și <article> elemente care conțin <article> elemente.
Ziarul: Cele mai sport articles din sport section , au o tehnică section în fiecare article .
HTML5 <header> Element
<header> Element Specifică un antet pentru un document sau o secțiune.
<header> Elementul trebuie utilizat ca un container pentru conținut introductiv.
Puteți avea mai multe <header> elemente într - un document.
Următorul exemplu definește un antet pentru un articol:
Exemplu
<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>
Încearcă - l singur » HTML5 <footer> Element
<footer> Elementul specifica un subsol pentru un document sau o secțiune.
Un <footer> Element trebuie să conțină informații cu privire la elementul său conține.
Un subsol conține în mod obișnuit autorul informațiilor documentului, drepturile de autor, link-uri cu termenii și condițiile de utilizare, informații de contact, etc.
Puteți avea mai multe <footer> elemente într - un document.
Exemplu
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
Încearcă - l singur » HTML5 <nav> Element
<nav> Elementul definește un set de link - uri de navigare.
<nav> Elementul este destinat pentru blocuri mari de link - uri de navigare. Cu toate acestea, nu toate legăturile dintr - un document care ar trebui să fie în interiorul unui <nav> Element!
Exemplu
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Încearcă - l singur » HTML5 <aside> Element
<aside> Element definește conținut în afară de conținutul este plasat în (like a sidebar) .
Conținutul deoparte ar trebui să fie legată de conținutul din jur.
Exemplu
<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>
Încearcă - l singur » HTML5 <figure> și <figcaption> Elemente
În cărți și ziare, este comun să aibă legende cu imagini.
Scopul unei legende este de a adăuga o explicație vizuală a unei imagini.
Cu HTML5, imagini și legende pot fi grupate în <figure> elemente:
Exemplu
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. -
The Pulpit Rock, Norway.</figcaption>
</figure>
Încearcă - l singur » <img> Elementul definește imagine, <figcaption> elementul definește legenda.
De ce semantic HTML5 Elements?
Cu HTML4, dezvoltatorii folosit propriul lor preferat nume de atribute elementelor de pagină de stil:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Acest lucru a făcut imposibilă pentru motoarele de căutare pentru a identifica conținutul paginii web corect.
Cu elemente HTML5 , cum ar fi: <header> <footer> <nav> <section> <article> , acest lucru va deveni mai ușor.
Potrivit W3C, un Semantic Web:
„Permite datelor să fie partajate și reutilizate pentru aplicații, întreprinderi și comunități.“
Elemente semantice în HTML5
Mai jos este o listă alfabetică a noilor elemente semantice în HTML5.
Link - urile merg la noastră completă HTML5 de referință .
| Etichetă | Descriere |
|---|---|
| <article> | Definește un articol |
| <aside> | Definește conținut în afară de conținutul paginii |
| <details> | Definește detalii suplimentare pe care utilizatorul poate vizualiza sau a ascunde |
| <figcaption> | Definește o legendă pentru un <figure> Element |
| <figure> | Specifică conținut autonom, cum ar fi ilustrații, diagrame, fotografii, liste de cod, etc. |
| <footer> | Definește un subsol pentru un document sau o secțiune |
| <header> | Specifică un antet pentru un document sau o secțiune |
| <main> | Specifică conținutul principal al unui document |
| <mark> | Definește marcate text / evidențiat |
| <nav> | Definește link-uri de navigare |
| <section> | Definește o secțiune într-un document |
| <summary> | Definește o poziție vizibilă pentru <details> Element |
| <time> | Definește o data / ora |