header & footer:
On va voir un exemple utilisons les balises <footer> et <header>. Leur utilisation peut certainement dépasser l’en-tête et le pied de page traditionnelle. Prenons l’exemple :
<div id="header">
<h1>Mon Site</h1>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="main">
<div class="article">
<h1>Titre de l'article</h1>
<p>
Corps de l'article
</p>
</div>
</div>
<div id="footer">
<p>Copyright - 2013</p>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Le balisage ci-dessus est sûrement normal. C'est la structure de base d’une page HTML : un en-tête, le contenu principal, puis le pied de page. Maintenant, on va utiliser les nouveaux éléments footer et header :
Commençons par remplacer les deux balises <div id="header"> et <div id ="footer"> avec des éléments plus appropriés header et footer.
<header>
<h1>Mon Site</h1>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div id="main">
<div class="article">
<h1>Titre de l'article</h1>
<p>
Corps de l'article
</p>
</div>
</div>
<footer>
<p>Copyright - 2013</p>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
Notez qu'il est parfaitement acceptable d'utiliser ces deux éléments même pas dans leur emplacement traditionnelle, vous n'êtes pas limité au seul usage. Il conviendrait également, par exemple, d'utiliser la balise <header> pour désigner l'en-tête d'un article, ou d’une section. Etc...
En outre, si votre article contient des informations, des liens vers d'autres articles, ou des liens de réseaux sociaux, vous pouvez aussi les envelopper librement dans une balise <footer>.
nav:
Ensuite, prenons les liens de navigation. Dans sa forme actuelle , nous avons une liste simple:
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
Il n'y a certainement aucun erreur, ajoutons la nouvelle balise
html5 <nav>:
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
La balise <nav> détermine une section dans laquelle sont regroupés des liens de navigation vers d'autres pages. Elle correspond au menu principal d'un site.
article:
Nous avons été obligés d'utiliser des noms de classes pour désigner et cibler leurs articles.
<div class="article">
Maintenant, nous pouvons utiliser la nouvelle balise
HTML5 <article>.
Si nous prenons l'exemple précédent, il faut actuellement avoir:
<header>
<h1>Mon Site</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="main">
<article>
<h1>Titre de l'article</h1>
<p>
Corps de l'article
</p>
</article>
</div>
<footer>
<p>Copyright - 2013</p>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</footer>
La balise <article> détermine une section de la page indépendante relative au traitement d'un sujet spécifique comme un nouveau article dans un
blog.
section:
La balise <section> détermine une section regroupant les éléments d'un même thème au sein d'un document.
c'est un moyen facile pour bien divisés vos sites en plusieurs sections, prenons par exemple un journaux: Il est divisé en plusieurs sections: section sportive , section politique , section financière...etc
<section>
<h1>Sport</h1>
<p>Bla Bla Bla Bla</p>
</section>
<section>
<h1>Politique</h1>
<p>Bla Bla Bla Bla</p>
</section>
<section>
<h1>Finance</h1>
<p>Bla Bla Bla Bla</p>
</section>
Remarquez qu'on peut utilser plusieurs balises <h1>. En HTML4 , cela a été désapprouvée.
Cependant, ce n'est plus le cas . La section va créer un nouveau contexte. Ce que vous devez comprendre, c'est que la balise <section> n'est pas destinée à remplacer le div, mais à contenir les éléments de même contexte.
aside:
La balise <aside> permet de déclarer une section associée soit au document soit à la balise <article>, Elle représente une section d'une page qui est lié au contenu qui l'entoure.
<article>
<h1>Titre</h1>
<aside>
<h3>Sidebar</h3>
<div>
infos...
</div>
</aside>
</article>
