Historique
As-tu déjà entendu parler de sémantique ?
Oui, mais je ne sais pas vraiment ce que ça veut dire.
La sémantique c'est le fait de rendre un contenu interprété par un ordinateur aussi lisible par un humain. Par exemple un fichier texte est lisible par un humain, alors qu'une base de données ou un agenda éléctronique nécessite une application pour lire les données et les afficher dans un format lisible par l'utilisateur.
On peut donc considérer que le html est un langage sémantique, même si celui ci nécessite un peu d'apprentissage, il peut être lu et compris par un humain.
En HTML 4.1
Le problème étant qu'à l'époque du HTML 4.1 il y avait un nombre limité de balises, et les balises <div> <span> et <table> étaient principalement utilisées pour la création de page HTML. Ce qui rendait la lecture des balises insuffisantes pour comprendre la page, il fallait aussi lire le contenu pour le comprendre, et ensuite faire l'association entre un contenu et ses conteneurs pour comprendre la sémantique d'une page. Il faut savoir que les emails qui contiennent du HTML (newsletters par exemple en général) utilisent le HTML 4.1, le 5 n'étant pas encore compris.
L'arrivée du HTML 5
Avec HTML 5, de nombreuses nouvelles balises sont arrivées, et beaucoup d'entre elles sont des balises dites sémantiques, car elle permettent à la fois de servir de conteneur, mais aussi d'apporter des informations sur ce qu'elles contiennent.
Un exemple parlant est la balise <nav> qui définit un élément de navigation. On pourrait très bien utiliser un <div> pour créer le menu d'un site, mais le <nav> permettra de faire la même chose en ajoutant la notion que son contenu permet de naviguer sur le site.
Mais à quoi ça sert, vu qu'au final la page va être lue par un navigateur pour être affichée ? Personne ne va lire le code !
Détrompe-toi, en tout premier lieu il y a les développeurs qui lisent le code, et ce type de balise permet de faciliter la compréhension d'un code, et donc de gagner du temps sur le travail à réaliser. Et on ne le fait pas que pour soit, en entreprise on travaille souvent en équipe, donc utiliser de façon appropriée des balises sémantique va aussi aider au travail des collègues avec qui on travaille.
Effectivement ça ne peut pas faire de mal.
Et d'autre part la sémantique à un rôle important dans l'accessibilité, car les personnes en situation de handicap visuel utilisent très souvent des logiciels de lecture des pages. Ces logiciels vont lire le code HTML, pour l'interpréter et décrire dans un format audio ce que la personne pourrait voir sur la page. Et toujours de la même façon, une <div> sera comprise comme un élément de la page par ce type d'outils, alors qu'un <nav> lui permettra d'identifier facilement les éléments de navigation, et donc de ne les avertir à l'utilisateur que celui-ci en fait la demande.
Ok, c'est donc indispensable.
Et dernier point, les moteurs de recherche qui analysent ton site pour le référencer vont aussi lire le code HTML, pour le comprendre, et le catégoriser pour qu'il soit présenté selon certaines recherches. Le fait de bien comprendre le contenu ne peut être qu'un avantage sur la compréhension du site et donc son référencement.
Très bien, j'adopte les balises <nav>
Il n'y a pas que la balise <nav> c'était un exemple mais il en existe bien d'autres. Nous allons voir les principales. J'ai terminé cette partie