Télécharger le PDF du cours
Nous allons également en profiter pour présenter différents éléments introduits avec le HTML5 et qui vont justement nous permettre de donner du sens aux différentes parties de nos pages ou de préciser la nature de certains contenus.
Le HTML et la sémantique
L’objectif principal du HTML est de structurer du contenu ou de lui donner du sens. En effet, les robots et programmes ne parlent pas la même langue que nous, ne possèdent pas nos yeux ni notre intelligence pour pouvoir distinguer des contenus et les comprendre par eux-mêmes.
C’est la raison pour laquelle nous utilisons le HTML puisque les différents robots et programmes vont très bien le comprendre.
Cela va ainsi permettre aux moteurs de recherche et aux navigateurs de « lire » nos pages et de « comprendre » ce que représente chaque type de contenu pour les afficher au mieux dans le cas d’un navigateur ou pour pouvoir les présenter à des gens effectuant une recherche sur un sujet que notre page traite dans le cas d’un moteur de recherche.
Grâce au HTML, nous allons pouvoir marquer nos différents contenus avec de nombreux éléments qui vont permettre de leur donner du sens. Utiliser les « bons » éléments à chaque fois et ceux qui font le plus de sens va ainsi être essentiel pour que notre page soit la plus lisible et la plus compréhensible possible pour les différents robots et programmes.
Le HTML5 nous offre justement une série de nouveaux éléments dit « structurants » et qui vont nous permettre de préciser le sens de certains contenus. Ces éléments sont dits « structurants » puisqu’ils ont une visée purement sémantique.
Certains de ces éléments vont notamment pouvoir être utilisés à la place des classiques div et span qui sont deux conteneurs génériques c’est-à-dire des éléments qui n’apportent aucun sens au contenu.
Liste et description des éléments structurants
Le HTML5 apporte les éléments structurants suivants :
| Nom de l’élément | Description |
|---|---|
| header | Représente l’en-tête ou le haut d’une page |
| nav | Représente un menu de navigation dans une page |
| main | Représente le contenu principal de l’élément body |
| section | Représente une section dans une page, c’est-à-dire un groupement thématique de contenu |
| article | Représente une partie de page qui se suffit à elle-même, comme un post sur un blog par exemple |
| aside | Représente une partie de contenu non lié au reste |
| footer | Représente le pied d’une page |
L’élément header
L’élément header représente l’en-tête de nos pages. Cet élément va généralement contenir le logo du site et le menu principal de navigation. Dans le cas d’un blog, si nous avons un article de blog qui est placé dans un élément article, on pourra également utiliser un élément header dans l’élément article et y placer les informations relatives à l’auteur, au temps de lecture, etc.
L’élément nav
L’élément nav représente un menu de navigation. Nous allons par exemple pouvoir utiliser cet élément pour entourer le menu de nos pages. Cela va permettre d’indiquer aux navigateurs et moteurs de recherche que notre élément ul (utilisé pour créer un menu) n’est pas qu’une liste mais bien un menu de navigation.
L’élément main
L’élément main représente le contenu principal ou « majoritaire » du body. La zone de contenu principale d’un document comprend un contenu unique à ce document et exclut le contenu répété sur un ensemble de documents, tels que des liens de navigation de site, des informations de copyright, des logos de site et des bannières.
La spécification officielle (HTML5.1) indique que l’élément main ne doit pas être imbriqué dans un autre élément structurant et qu’on ne doit utiliser qu’un élément main par page. Cependant, ces limitations sont levées dans le Living Standard (qui possède un peu d’vance sur la spéc officielle).
L’élément article
L’élément article représente une partie indépendante d’une page. Nous utiliserons cet élément pour entourer du contenu qui pourrait être extrait de notre page et distribué ailleurs tout en continuant à faire du sens.
Imaginez par exemple une page catégorie d’un blog qui affiche les différents articles de la catégorie. Chacun des différents articles n’a pas besoin des autres ou du reste de la page pour faire du sens et pourrait tout à fait être extrait de la page et intégré sur un autre site et rester tout à fait lisible. Dans ce cas-là, il serait donc intéressant de placer chaque article dans un élément article.
L’élément section
L’élément section représente à nouveau une partie d’une page cohérente mais qui ne va pas forcément faire du sens si on l’extrait seule de la page pour l’intégrer ailleurs. L’élément section est à mi-chemin entre les éléments article et div et nous pourrons nous en servir pour organiser nos pages.
Un cas classique d’utilisation de section est le cas d’une page de présentation d’une entreprise. Sur ce type de pages, il y a généralement une partie dédiée à la présentation de l’activité de l’entreprise, une autre partie pour l’équipe, etc. Nous pourrons ici encadrer chaque partie avec un élément section pour les séparer les unes des autres.
Il va être tout à fait possible d’inclure un ou plusieurs éléments section dans un élément article si on souhaite diviser le contenu de notre article en plusieurs parties.
Notez que nous allons également pouvoir faire le contraire, c’est-à-dire placer un ou plusieurs éléments article dans un élément section. Pour des raisons de respect de la sémantique nous éviterons cependant d’imbriquer les éléments dans cet ordre.
L’élément aside
L’élément aside permet d’indiquer un contenu en marge du reste de la page, c’est-à-dire différent du reste de la page. Imaginons par exemple que nous ayons un blog et que chaque article de blog se trouve dans un élément article.
Dans nos articles, nous affichons des publicités. Les publicités n’ont aucune cohérence avec le contenu de l’article (ou tout au moins ne sont pas utiles à l’article). Nous pourrons donc les placer dans un élément aside pour le signaler aux moteurs de recherche et autres types de robots.
L’élément footer
L’élément footer va avoir un rôle et une signification sémantique identiques à l’élément header. Comme son nom l’indique, nous utiliserons cet élément pour entourer les informations de pied de page (notice de copyright, menu de navigation bas, etc.).
Utilisation des éléments HTML structurants
Nous allons donc en pratique utiliser nos éléments structurants pour mieux structurer nos pages et apporter du contexte et plus de sens aux différents objets dans nos pages.
Voici par exemple une utilisation des éléments structurants HTML. Le schéma que je vous propose ici est un schéma d’une page simple et relativement classique :
Et voici une représentation imagée de la structure HTML ci-dessus (j’ai bien évidemment positionné mes éléments en CSS et leur ai donné des couleurs pour arriver à cela :
Autres éléments utilisés pour renforcer la sémantique d’une page
Les éléments suivants ne vont pas servir à « structurer » une page en soi mais vont nous permettre de donner du sens à certains types de contenus ou de données. Nous allons ici étudier les éléments suivants :
time;address;figure;figcaption.
L’élément time
L’élément time va pouvoir représenter soit une heure de la journée soit une date complète. Il faut savoir que les dates sont très difficiles à analyser pour les robots car la plupart des auteurs utilisent des syntaxes différentes dans l’écriture d’un moment de la journée ou d’une date.
Pour cette raison, nous allons ajouter un attribut datetime à l’élément time. Nous allons ensuite simplement passer une date en valeur de cet attribut en respectant le format yyyy-mm-dd hh:mmTIMEZONE.
La date devra être au format 24h et le timezone va être exprimé par rapport à GMT (on écrira donc +0100 pour Paris par exemple).
Cette date pourra être récupérée et affichée à côté de l’extrait dans la liste des résultats de Google par exemple.
L’élément address
L’élément address représente des informations de contact. On pourra par exemple l’utiliser pour encadrer l’adresse mail d’un auteur dans le cas d’un blog.
Les éléments figure et figcaption
Nous connaissons déjà les deux derniers éléments structurants qui sont les éléments figure qui représente une figure (photo, illustration, etc.) et figcaption qui va nous servir à ajouter une légende à un élément figure.
