Éléments sémantiques en HTML5
Éléments sémantiques en HTML5
-
Objectifs
- Connaitre les éléments sémantiques en HTML5
-
Présentation
- Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l’application web, qui possèdent une valeur sémantique particulière ;
- Contrairement à des éléments génériques comme <span> ou <div> qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments HTML pour leur affecter un style commun
-
Élément <section>
- Selon la documentation HTML5 du W3C: “Une section est un regroupement thématique de contenu, généralement avec un en-tête”.
- Une page d’accueil peut normalement être divisée en sections pour une introduction, un contenu et des informations de contact.
-
Élément <article>
- L’élément <article> spécifie un contenu indépendant et autonome.
- Un article doit avoir un sens en lui-même et il devrait être possible de le lire indépendamment du reste du site Web.
- L’élément <article> fait partie des nouvelles balises sémantiques html5. Elle permet d’introduire une page, une section.
-
Élément <nav>
- L’élément <nav> définit un ensemble de liens de navigation.
- L’élément <nav> possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
- L’élément <nav> est un choix de prédilection pour la navigation principale (souvent dans <header> ) et éventuellement pour les navigations annexes de moindre valeur (souvent dans <footer>).
-
Élément <aside>
- L’Élément <aside> définit un contenu en dehors du contenu dans lequel il est placé.
- L’Élément <aside> définit un contenu à part du contenu général. Le contenu mis de coté par la balise <aside> doit être lié au contenu environnant.
- Une page web est bien souvent dotée d’un contenu principal et d’informations connexes qui ne sont pas
essentielles à sa compréhension. On parle alors de contenu tangentiel, et l’élément <aside> est destiné à
l’abriter. -
Élément <header>
- <header> fait partie des nouvelles balises sémantiques html5. Elle permet d’introduire une page, une section.
-
Élément <footer>
- L’élément <footer> spécifie un pied de page pour un document ou une section.
- L’élément <footer> doit contenir des informations sur son élément conteneur.
- Un pied de page contient généralement l’auteur du document, des informations de copyright, des liens vers les conditions d’utilisation, des informations de contact, etc.
<article>
<header>
<h1>Titre du header de l’article: h1</h1>
<p>contenu</p>
</header>
<p>Contenu de l’article, premier paragraphe.</p>
Contenu de l’article, deuxième paragraphe.</p>
<footer>
<h3>Titre du footer de l’article: h3</h3>
<p>contenu</p>
</footer>
</article>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav><aside>
<h3>Nos cours apcpedagogie</h3>
<ul>
<li><a href="#">site apcpedagogie</a></li>
<li><a href="#">apcpedagogie cours HTML</a></li>
<li><a href="#">apcpedagogie cours C sharp</a></li>
<li><a href="#">apcpedagogie exercices HTML</a></li>
</ul>
</aside><header>
<img src="images/logo.png" alt="logo de mon site" title="mon logo"/>
<h1>Le slogan de votre site</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</nav>
</header>Toujours dans la liste des balises sémantiques html5, footer peut se trouver au pied de la page ou au pied de chaque section.
