Sémantique est l'étude des significations des mots et des phrases dans la langue.
éléments sémantiques sont des éléments avec un sens.
Sémantique HTML est l'utilisation de balises HTML pour renforcer la sémantique, ou sens, des informations dans les pages web et les applications Web plutôt que simplement de définir sa présentation ou regarder.
Sémantique HTML est traité par les navigateurs Web traditionnels, ainsi que par de nombreux autres agents utilisateurs. CSS est utilisé pour suggérer sa présentation aux utilisateurs humains.
Quels sont les éléments sémantiques?
Un élément sémantique décrit clairement son sens à la fois le navigateur et le développeur.
Des exemples d'éléments non-sémantiques: <div> et <span> - ne dit rien sur son contenu.
Des exemples d'éléments sémantiques: <form> , <table> et <img> - définit clairement son contenu.
Support du navigateur
| Oui | Oui | Oui | Oui | Oui |
éléments HTML5 sémantiques sont pris en charge dans tous les navigateurs modernes.
De plus, vous pouvez "teach" les anciens navigateurs comment gérer "unknown elements" .
Lisez à ce sujet dans Support du navigateur HTML5 .
De nouveaux éléments sémantiques en HTML5
De nombreux sites Web contiennent du code HTML comme: <div id="nav"> <div class="header"> <div id="footer"> de <div id="nav"> <div class="header"> <div id="footer">
pour indiquer la navigation, en-tête et pied de page.
HTML5 offre de nouveaux éléments sémantiques pour définir les différentes parties d'une page web:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
HTML5 <section> Element
La <section> élément définit une section dans un document.
Selon la documentation HTML5 du W3C: "A section is a thematic grouping of content, typically with a heading."
pourrait être divisé la page d'accueil d'un site Web en sections pour l'introduction, le contenu et les informations de contact.
Exemple
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section> Essayez vous - même » HTML5 <article> Element
Le <article> élément spécifie le contenu autonome et indépendant.
Un article doit donner un sens lui-même, et il devrait être possible de le lire indépendamment du reste du site Web.
Exemples où un <article> élément peut être utilisé:
- Forum post
- Blog post
- Article de journal
Exemple
<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> Essayez vous - même » Les éléments sémantiques Nesting
Dans la norme HTML5, le <article> élément définit un bloc complet et autonome d'éléments connexes.
Le <section> élément est défini comme un bloc d'éléments connexes.
Peut-on utiliser les définitions de décider comment imbriquer des éléments? Non, nous ne pouvons pas!
Sur Internet, vous trouverez des pages HTML avec <section> éléments contenant <article> éléments, et <article> contenant des éléments <sections> éléments.
Vous trouverez également des pages avec <section> contenant des éléments <section> éléments, et <article> éléments contenant <article> éléments.
Journal: Les sportifs articles du sport section , ont une technique section dans chaque article .
HTML5 <header> Element
Le <header> élément spécifie un en- tête d'un document ou d'une section.
Le <header> élément doit être utilisé comme récipient pour le contenu d' introduction.
Vous pouvez avoir plusieurs <header> éléments dans un seul document.
L'exemple suivant définit un en-tête d'un article:
Exemple
<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> Essayez vous - même » HTML5 <footer> Element
Le <footer> élément spécifie un pied de page d'un document ou d'une section.
Un <footer> élément doit contenir des informations sur son élément contenant.
Un pied de page contient généralement l'auteur du document, les informations de copyright, des liens vers conditions d'utilisation, des informations de contact, etc.
Vous pouvez avoir plusieurs <footer> éléments dans un seul document.
Exemple
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer> Essayez vous - même » HTML5 <nav> Element
Le <nav> élément définit un ensemble de liens de navigation.
Le <nav> élément est destiné à de grands blocs de liens de navigation. Cependant, tous les liens dans un document doivent être à l' intérieur d' un <nav> élément!
Exemple
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav> Essayez vous - même » HTML5 <aside> Element
Le <aside> élément définit une partie du contenu mis à part le contenu est placé dans (like a sidebar) .
Le contenu de côté doit être lié au contenu environnant.
Exemple
<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> Essayez vous - même » HTML5 <figure> et <figcaption> éléments
Dans les livres et les journaux, il est courant d'avoir des sous-titres avec des images.
Le but d'une légende est d'ajouter une explication visuelle à une image.
Avec HTML5, les images et les légendes peuvent être regroupés dans <figure> éléments:
Exemple
<figure>
<img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure> Essayez vous - même » Le <img> élément définit l'image, le <figcaption> élément définit la légende.
Pourquoi sémantique HTML5 éléments?
Avec HTML4, les développeurs ont utilisé leur nom propre attribut favori à des éléments de page de style:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
Cela a rendu impossible pour les moteurs de recherche pour identifier le contenu de la page Web correcte.
Avec des éléments HTML5 comme: <header> <footer> <nav> <section> <article> , cela deviendra plus facile.
Selon le W3C, un Web sémantique:
« Permet de partager des données et réutilisées dans toutes les applications, les entreprises et les communautés. »
considérations
Dans les cas où un document nécessite une sémantique plus précises que celles exprimées en HTML seul, des fragments du document peuvent être insérés dans des éléments de portée ou div avec les noms de classes significatives telles que <span class = « author »> et <div class = « facture » >. Lorsque ces noms de classe sont également un identifiant de fragment dans un schéma ou l'ontologie, ils peuvent un lien vers un sens plus défini. Microformats formalise cette approche sémantique en HTML.
Une restriction importante de cette approche est que cette majoration fondée sur l'inclusion des éléments doit remplir les conditions de bonne formation. Étant donné que ces documents sont largement structurés d'arbres, cela signifie que des fragments équilibrés d'un sous-arbre peuvent être marqués de cette façon. Un moyen de marquage jusqu'à une section arbitraire du langage HTML, il faudrait un mécanisme indépendant de la structure de balisage lui-même, tel que XPointer.
Bonne HTML sémantique améliore également l'accessibilité des documents Web (voir aussi contenu Web Accessibility Guidelines). [Citation nécessaire] Par exemple, lorsqu'un lecteur d'écran ou d'un navigateur audio peut correctement déterminer la structure d'un document, il ne sera pas perdre de l'utilisateur ayant une déficience visuelle temps en lisant des informations non pertinentes ou répétée lorsqu'il a été marqué correctement.
Les éléments sémantiques en HTML5
Ci-dessous une liste alphabétique des nouveaux éléments sémantiques en HTML5.
Les liens vont à notre complète référence HTML5 .
| Marque | La description |
|---|---|
| <article> | Définit un article |
| <aside> | Définit le contenu en dehors de contenu de la page |
| <details> | Définit les détails supplémentaires que l'utilisateur peut afficher ou masquer |
| <figcaption> | Définit une légende pour une <figure> élément |
| <figure> | Indique le contenu autonome, comme des illustrations, des diagrammes, des photos, des listes de codes, etc. |
| <footer> | Définit un pied de page d'un document ou d'une section |
| <header> | Indique un en-tête d'un document ou d'une section |
| <main> | Indique le contenu principal d'un document |
| <mark> | Définit marqué / texte en surbrillance |
| <nav> | Définit les liens de navigation |
| <section> | Définit une section dans un document |
| <summary> | Définit une rubrique visible pour un <details> élément |
| <time> | Définit une date / heure |