Sémantique HTML
Construction en div
Quand on construit un site, on commence par matérialiser les différentes zones :
- le haut du site avec le logo, la barre de recherches ...
- les liens de navigation, pour passer de page en page
- les différentes zones de contenu
- le pied de page avec les mentions légales, les réseaux sociaux ...
- ...
Pour faire cela, on peut diviser le site avec la balise <div>
<body>
<div id="mf"></div>
<div id="mc"></div>
<div id="md"></div>
<div id="mg"></div>
</body>
body{
display: flex;
flex-wrap: wrap;
}
div#mf{
background: lightblue;
width: 100%;
}
div#mc{
background: lightgreen;
width: 25%;
}
div#md{
background: lightyellow;
width: 75%;
}
div#mg{
background: lightgrey;
width: 100%;
}
Cette technique fonctionne mais elle nécessite d'identifier chaque div avec id. Or cette id doit être évocatrice, pas comme dans l'exemple ci-dessus.
Dans la pratique, on utilisait tous les mêmes termes pour désigner ces éléments
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
Pour éviter ces inconvéniants de nommage et faciliter la lecture sémantique du code, le HTML5 a introduit de nouvelles balises.
Les balises sémantique
header
La balise header permet d'indiquer une entête de site, comme vu dans le premier exemple. Mais pas que ... Header peut être utilisé à l'intérieur d'un autre élément, comme l'introduction d'une article, par exemple.
<header>
<h1>
<a href="index.html">
<img src="logo.png" alt="logo du site">
</a>
</h1>
</header>
footer
Par opposition on trouvera le footer, en bas du site, avec les mentions légales, les réseaux sociaux ...
<footer>
<a href="mentions.html">Mentions légales</a>
<a href="sitemap.xml">Plan du site</a>
<a href="https://facebook.com" target="_blank">Facebook</a>
<a href="https://linkedin.com" target="_blank">LinkedIn</a>
</footer>
nav
La navigation présentera les liens qui permettent de naviguer sur le site, de passer de page en page. Attention à ne pas l'utiliser pour des liens externes, comme les réseaux sociaux. Cette balise sert véritablement aux liens internes au site. C'est en cela qu'elle favorise le référencement.
Les moteurs de recherches sont à l'affût de cette balise pour cartographier le site.
<nav>
<a href="index.html">Accueil</a>
<a href="html/page1.html">Page 1</a>
<a href="html/page2.html">Page 2</a>
<a href="html/page3.html">Page 3</a>
<a href="html/contact.html">Contact</a>
</nav>
main
La balise main n'a rien d'obligatoire. Mais dans le cadre d'un site etoffé, cette balise permet de cibler le contenu essentiel du site. Dans certains cas, elle permet aussi d'organiser le contenu graphiquement, au-delà de toute considération de référencement.
<main>
<article></article>
<article></article>
<article></article>
</main>
Ce site contient trois blocs essentiels, donc regroupés dans un main
aside
Aside est trompeur. Ce n'est pas un bloc placé sur le côté !
C'est un bloc non essentiel, par opposition au bloc main. On peut imaginer, un bandeau publicitaire ...
<aside>publicité ...</aside>
article
Article a la même valeur que section. C'est un bloc qui permet de structurer le contenu, de le diviser. Il peut exister dans un main mais également dans une section, ou en dehors !
<main>
<article></article>
<section></section>
<!-- cette section contient à son tour 2 articles -->
<section>
<article></article>
<article></article>
</section>
</main>
section
Sur le même schema que la balise article, cette balise permet de structurer le contenu.
figure
Figure est une balise d'illustration. On l'utilise par exemple pour un graphique qui vient en appui d'une démonstration, comme dans un journal.
figcaption
Figcaption est le titre d'une illustration, elle fonctionne avec la balise figure
<figure>
<img src="graphique.png" alt="courbe d'illustration">
<figcaption>Courbe d'illustration. Source : xxxx</figcaption>
</figure>
Voici un exemple d'utilisation des balises de sémantique
<body>
<header></header>
<nav></nav>
<main>
<article></article>
<article></article>
<article></article>
</main>
<aside></aside>
<footer></footer>
</body>
body{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
header{
width: 100%;
background: lightblue;
}
nav{
width: 100%;
background: lightyellow;
}
main{
padding: 3% 0;
display: flex;
justify-content: space-between;
width: 75%;
background: lightcoral;
}
main article{
width: 30%;
background: lightseagreen;
}
aside{
width: 25%;
background: lightpink;
}
footer{
width: 100%;
background: lightyellow;
}
exercices
exercice 1
exercice 2
corrigés
exercice 1
<body>
<header></header>
<nav></nav>
<main>
<!-- un main peut commencer par un header, une introduction -->
<header></header>
<article></article>
<article></article>
<article></article>
<!-- et donc finir par un footer, une conclusion -->
<footer></footer>
</main>
<aside></aside>
<footer></footer>
</body>
*{margin:0;padding:0;min-height:50px;}
body{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
header{
width: 100%;
background: rgb(178, 212, 138);
}
nav{
width: 100%;
background: rgb(172, 231, 231);
}
main{
width: 71%; /* car 2% de padding à droite ET à gauche */
padding: 2%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: rgb(228, 165, 207);
height: 200px;
}
main header,
main footer{
/* pour décoller les éléments */
margin: 2% auto;
}
main article{
width: 30%;
background: rgb(247, 237, 152);
}
aside{
width: 25%;
background: lightpink;
height: 200px;
padding: 3% 0;
}
footer{
width: 100%;
background: rgb(201, 201, 198);
}
exercice 2
<body>
<header>
<h1>Titre du site</h1>
<!-- la nav peut être contenue dans le header -->
<nav>
<a href="index.html">Accueil</a>
<a href="html/page1.html">Page 1</a>
<a href="html/page2.html">Page 2</a>
<a href="html/page3.html">Page 3</a>
<a href="html/contact.html">Contact</a>
</nav>
</header>
<main>
<article></article>
<article></article>
<!-- je mets une section car le bloc est différent mais reste un élément de contenu -->
<section></section>
</main>
<footer></footer>
<!-- il peut y avoir 2 footer ! -->
<footer></footer>
</body>
*{margin:0;padding:0;min-height:50px;}
body{
display: flex;
flex-wrap: wrap;
}
header{
width: 100%;
background: rgb(178, 212, 138);
padding: 2%;
}
nav{
width: 80%;
margin: auto;
background: rgb(172, 231, 231);
display: flex;
align-items: center;
justify-content: space-evenly;
}
main{
width: 100%;
padding: 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: rgb(228, 165, 207);
height: 200px;
}
main article{
width: 40%;
background: rgb(247, 237, 152);
}
main section{
width: 100%;
margin-top: 5%;
background: rgb(247, 237, 152);
}
aside{
width: 25%;
background: lightpink;
height: 200px;
padding: 3% 0;
}
footer{
width: 50%;
background: rgb(201, 201, 198);
}
/* ou alors on utilise une id en html */
footer:last-of-type{
background: rgb(145, 143, 216);
}