Les balises HTML sont principalement utilisées pour l’affichage de la page. Ces balises indiquent au navigateur comment afficher le contenu de la page. Elles ne donnent aucune indication sur le type et le rôle du contenu présenté.
Le HTML5 sémantique comble cette lacune en définissant des balises spécifiques pour indiquer clairement le rôle du contenu qu'elles englobent. Cette information explicite aide les machines comme Google et Bing à comprendre les rôles et l'importance relative de différentes parties de votre page.
Pour les utilisateurs, il est généralement facile d'identifier les différentes zones d'une page web en un coup d'œil. Les en-têtes, les menus et (espérons-le) le contenu principal sont tous immédiatement apparents et évidents. Mais les bots des moteurs de recherche (les “crawlers”) sont gravement malvoyants. Pour eux, les indices visuels sont quasiment impossibles à comprendre. Ils ont besoin de votre aide.
Si vous pouvez communiquer à Google et Bing quelle partie de la page est l'en-tête, laquelle représente le footer et laquelle contient les éléments de navigation, ils vous seront reconnaissants. Il est encore plus important de pouvoir indiquer quelle partie de la page présente le message principal de votre contenu.
Voici quelques exemples de balises HTML sémantiques : <nav> <footer> <section>.
Il existe beaucoup d'autres balises sémantiques HTML5 qui peuvent être utilisées (par exemple, <blockquote> et <em>). Dans cet article, je me concentrerai sur les tags HTML5 sémantiques dont vous aurez besoin pour communiquer la structure de votre page (les balises HTML5 structurelles) :
Les balises HTML5 suivantes peuvent être utilisées à la place des balises <div> pour diviser le contenu de votre page en différentes zones ayant des rôles spécifiques. Comme vous pouvez l'imaginer, les machines comme Google et Bing adorent ça.
En attribuant un rôle à chaque partie du contenu grâce au HTML5 sémantique, nous pouvons rendre la page beaucoup plus claire et plus facile à indexer pour les moteurs de recherche.
NB : Étant donné que ces balises se comportent exactement comme les balises <div>, elles peuvent simplement remplacer les <div> existants sans affecter la mise en page (visuelle). Souvent, mettre en place le HTML5 sémantique peut être aussi simple que trouver une paire correcte de <div> et </ div> et de la remplacer.
Il vaut mieux avoir une implémentation super simple et à 100% correcte plutôt qu'une implémentation complexe et incorrecte.