Sémantique du header
Avant HTML5 dans les structures HTML l'on pouvait trouver ceci : <div id="header"> ou <div id="entete">
Mais à quoi sert cette balise ?
"Un groupe d'aide de navigation ou d'introduction. Un élément header contient de façon générale les headings (les éléments h1 à h6 ou l'élément hgroup).
Il peut aussi contenir d'autres éléments, comme la navigation principale, un formulaire de recherche ou d'inscription, ou des logos."
Spécification HTML5
Il peut donc y avoir plusieurs header dans une page, puisque cette balise peut servir d'entête dans vos sections, articles et asides.
Elles contiendront titres, navigation, formulaire, introductions en textes (définition, citation,...) et/ou en images.
La balise header tout comme le footer nous donnent la possibilité de structurer les informations présentées dans nos documents. Une meilleure sémantique pour guider le travail d'indexation des pages par les moteurs de recherche.
<body>
<header>
<img src="img/logo.jpg">
<h1>Le titre le plus important de la page</h1>
<p>lorem ipsum dolor set amet...</p>
<nav>
<ul>
<li>A propos</li>
<li>...</li>
</ul>
</nav>
</header>
<section>
<header>
<h1>Titre de cette section</h1>
</header>
<article>
<header>
<h1>Titre de cet article</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
<figure>
<img src="img/illustration01.jpg">
<figcaption>legende img</figcaption>
</figure>
<footer>Auteur de l'article / Date parution <time> / Navigation(ex: next article)</footer>
</article>
</section>
<aside>
<header>
<h1>Titre de cette aside</h1>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
<ul>
<li>A propos</li>
<li>...</li>
</ul>
</aside>
<footer>Liens / copyright / <address>adresse</address> / ...</footer>
</body>
Sémantique du Footer
Il représente le pied de page d'une section, d'un article ou d'une page.
On y met les informations complémentaires concernant l'auteur, la date de parution, la catégorisation, les mentions légales...
La balise <address> présente les informations de l'auteur ou du propriétaire d'un document.
Elle permet de mettre en évidence des adresses, coordonnées et URL.
<address>
Rodolphe Turmel
rodolphe@nose-store.com
</address>
Sémantique du aside
La balise HTML5 <aside> sert à encapsuler de l'information supplémentaire relative à un article ou une page, mais qui n'est pas absolument nécessaire à sa compréhension.
<body>
<header>
<h1>Mon Blog</h1>
</header>
<main>
<section>
<article>
<h1>Mon billet de mon blog</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!—Vu que ce aside est à l'intérieur de la balise article,
l'analyseur syntaxique va comprendre que le contenu de la balise est directement relié à l'article. -->
<h1>Glossaire</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
</section>
<section>
...
</section>
</main>
<aside>
<!—- Ce aside est en dehors de la balise article. Son contenu est donc relié à la page. -->
<h2>Mes liens utiles</h2>
<ul>
<li><a href="#">Lien 01</a></li>
<li><a href="#">Lien 02</a></li>
<li><a href="#">Lien 03</a></li>
</ul>
</aside>
</body>
Sémantique main
Il représente le contenu majoritaire du document.
Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation.
Il faut utiliser ces balises sémantiques de manière appropriée sinon on utilise des conteneurs non sémantiques comme la div(block) ou le span(inline).
