6 Balises d’architecture
Introduction
Dans le cours précédent, nous avons introduit les notions d’inline, et de block. Nous allons voir dans celui-ci, les différentes balises blocks qui permettent de construire le squelette d’une page Web. Ces balises d’architecture ont été introduites pour la plupart avec l’arrivée du HTML5. Elles permettent d’alléger largement le codage des pages, tout en indiquant au navigateur le sens du contenu.
1-Header
De manière générale, presque tous les sites possèdent un header (un en-tête en français) situé tout en haut des pages. Il prend très souvent la forme d’une bannière en haut de la page, et on peut y retrouver un logo, le slogan du site, le menu principal, la barre de recherche… Il peut aussi y avoir plusieurs éléments header dans une page, mais un seul doit être directement imbriqué sous le body.
2-Section
La balise section regroupe le ou les blocs principaux d’une page. Généralement, les sections de page englobent les contenus par thématique et se situent au centre de celle-ci. Il sera assez fréquent qu’une section imbrique d’autres blocks comme les éléments header, footer, article et d’autres sections.
3-Nav
L’élément nav (pour navigation) rassemblera quant à lui les principaux liens pour naviguer sur le site. On le retrouvera fréquemment dans l’en-tête ou sur un côté de la page, sous la forme du menu principal du site Web. Il peut aussi rassembler des liens internes à la page, pour amener directement l’utilisateur vers le contenu qui l’intéresse.
4-Article
La balise article sert à regrouper une partie autonome de la page. Cela permet ainsi à d’autres sites d’utiliser ce contenu, et par exemple d’en faire une citation. Elle est très utilisée dans les domaines traitant de l’actualité et dans le blogging.
5-Aside
La balise aside apporte des informations supplémentaires, bonus, qui vont compléter le contenu principal de la page. Ça peut être une définition, une image avec une légende pour illustrer le propos, un exemple…
Elle est généralement située sur le côté, en-dehors du bloc qu’elle enrichit (aside=à part) mais ce n’est pas une nécessité.
6-Footer
À l’inverse du header, le footer (pied de page en français) se situe tout en bas des pages du site. On y retrouvera bien souvent des informations annexes comme les mentions légales, les contacts, des liens pratiques…
Tout comme le header, il peut y avoir plusieurs footer, mais un seul directement sous le body.
Conclusion
Avec ces 6 éléments, vous avez donc de quoi créer l’ossature complète des pages de votre site Web. Il en existe également d’autres tels que details, summary, hgroup qui sont beaucoup moins utilisés.
Ci-dessous, vous pouvez voir l’exemple d’architecture de page web vu dans le cours précédent avec cette fois-ci le nom des blocks. Je rappelle qu’il s’agit d’une simple possibilité, il en existe une infinité, à vous de la définir en fonction de ce que vous voulez pour votre site.
J’espère que ce cours vous a plu, n’hésitez pas à laisser un commentaire, à très bientôt, JB
