Le Html5 a apporté de nouvelles balises (de type bloc)
permettant d'harmoniser la structure des pages web (attention, il s'agit de l'aspect sémantique,
ces balises ne font aucune mise en forme. La mise en forme est à définir
par le code css). En particulier, il permet de définir pour
la partie visible de chaque page :
- Un en-tête grâce à la balise
<header>(à ne pas confondre avec la balise<head>...) ; - Un menu de navigation dans le site grâce à la balise
<nav>; - La partie rédactionnelle de la page grâce à la balise
<section>qui peut être partagée avec une ou plusieurs balises<article>; - Un pied de page grâce à la balise
<footer>.
Il existe d'autres balises et de nombreuses discussions sur le web quant à l'utilisation correcte des
balises <main> (non décrite ici), <section> et <article>.
Nous n'entrerons pas dans ces polémiques pour simplifier le contenu des exercices.
En pratique, on ne se lance pas au hasard pour concevoir une page web ! On prépare un croquis qui
permet d'anticiper la structure de la page. Cette structure sera évidemment améliorée au fur et à mesure de la construction
de la page (et du site) web, mais elle sera un bon point de départ. Ci-dessous se trouve un croquis préparatoire du
site que vous êtes en train de consulter (l'apparence a bien évolué depuis ce croquis préparatoire).
La mise en forme (couleurs, bordures, disposition dans la page,...) sera définie par le code css.
Ce croquis montre aussi la nécessité d'utiliser des
balises universelles
span et div ainsi que des sélecteurs class et id pour préciser encore
mieux les éléments constitutifs de la page web.
