Les secrets des balises structurelles du HTML5 sémantique

Si vous connaissez un peu le HTML, vous savez que 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.

Exemples

Balises non sémantiques / génériques :

Ce sont des exemples d'éléments HTML non sémantiques. Ils servent seulement de conteneurs communiquant au navigateur comment le contenu qu'ils englobent doit être affiché. Ils ne donnent aucune information sur le rôle de ce contenu dans la page.

Voici des balises sémantiques :

Ces éléments définissent clairement le rôle du contenu qu’ils englobent.

Pourquoi dois-je utiliser le HTML5 sémantique ?

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.

L'utilisation du HTML5 sémantique en tant que telle ne révolutionnera pas vos performances SEO (désolé !). Comme vous le savez, le succès de votre stratégie de référencement naturel dépend d’un nombre immense de petits détails. Le HTML5 et l'un de ces petits détails. Il peut aider Google et Bing à mieux interpréter votre contenu et contribuer ainsi à vos efforts de référencement.

En élargissant notre vision, on peut dire que le SEO évoluera au cours des prochaines années. La communication explicite et cohérente avec ces machines deviendra essentielle pour votre stratégie SEO / AEO (Answer Engine Optimization).

À quoi ressemble le HTML5 sémantique structurel ?

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.

Exemples de HTML5 sémantique

Voici un exemple hyper simple de HTML5 sémantique structurelle avec les éléments les plus importants (header, footer, nav et main) :

Nous avons simplement défini les rôles des zones de la page. Lorsque vous commencez à appliquer le HTML5, ces zones sont le meilleur point de départ : header, nav, main, footer.

Il vaut mieux avoir une implémentation super simple et à 100% correcte plutôt qu'une implémentation complexe et incorrecte.

Une mise en œuvre simple et correcte est déjà un grand pas en avant dans votre communication avec Google et Bing. Ne soyez pas trop ambitieux. Si vous ne faites pas les choses correctement vous pouvez rendre l'interprétation de vos pages plus compliquée pour les machines !

Des exemples plus complexes

Voici un exemple plus complexe avec des sections et articles :

Note : La mise en page visuelle (les blocs oranges) n’est pas utilisée pour définir les zones sémantiques de la page.

Ici, nous définissons une hiérarchie pour notre contenu principal. Il existe un article parent qui identifie le contenu le plus important de la page. Cela donne un aperçu du sujet de cette zone de la page. Dans cet article, nous avons plusieurs sous-thèmes qui développent le sujet principal, identifiés par plusieurs sections imbriquées.

Le schéma ci-dessus peut paraître un peu bizarre, mais elle démontre bien que la mise en page HTML et le HTML5 sémantique ont des rôles distincts. Dans le monde réel, le balisage sémantique correspondra probablement d’avantage à la mise en page.

Note : Dans le schéma, j'ai ajouté une section de navigation en pied de page. Tout comme l'en-tête, le pied de page contient très souvent des éléments de navigation. 

Aside associé au contenu principal

Nous avons ajouté deux éléments de contenu directement liés à l'article principal. En utilisant des <aside>, nous indiquons que le contenu associé est facultatif. Le contenu de l'article parent peut être lu et interprété sans pour autant afficher les <aside>.

Aside non associé au contenu principal

Ici, nous avons identifié un contenu indirectement lié à la page, en dehors de l'article principal du contenu. Nous indiquons que le contenu à côté n'est pas directement lié à l'article principal.

Cela suffit pour la plupart des besoins.

Note : Un <aside> n’est pas obligatoirement une colonne située à côté du contenu principal. Il peut également être utilisé pour les zones situées en dessous où au-dessus du contenu principal.

Version finale

Conseils pratiques

Section ou Article ?

Il y a beaucoup de débats à ce sujet. Il n'y a pas de règles strictes sur les sections et les articles, et leur mise en œuvre est assez flexible. Ils ont à peu près la même importance et peuvent être utilisés de façon interchangeable la plupart du temps.

En règle générale, une section fait partie d’un ensemble plus grand. Un article est son propre élément. J'ai trouvé qu’utiliser un article divisé en sections est logique à la fois pour une machine et pour un humain (le code HTML sera plus facile à lire pour le développeur).

Peu importe votre choix, assurez-vous d'être logique et cohérent.

Les éléments imbriqués

Chaque partie peut contenir d'autres éléments. Par exemple, un article peut avoir son propre <header>, <footer>, <h1>, et même <nav> (les ancres en sont un bon exemple). Je n'ai pas donné d’illustration de cette imbrication HTML5 avancée, car je me suis concentré sur le SEO et, d’un point de vue SEO, il n'y a aucun avantage réel à pousser la logique du HTML5 sémantique aussi loin.

Comme mentionné ci-dessus, pour améliorer votre référencement vous devriez mettre en place un balisage simple et cohérent.

Ce qu'il ne faut pas faire

Juste pour vous avertir : j'ai vu de nombreux sites utiliser le design visuel comme guide pour leur mise en œuvre HTML5. Comme on l'a vu plus haut, le HTML5 sémantique n'est pas conçu pour le design.

Cet exemple (étonnamment courant) fait doublon avec le HTML visuel. Pire qu’inutile, cela indique aux moteurs de recherche que la page contient 4 sujets différents, plutôt qu'un seul sujet et 3 sous-thèmes. Fournir des informations trompeuses aux machines aura un impact négatif sur l'interprétation de votre page.

Que faire maintenant ?

La mise en œuvre d’un balisage HTML5 sémantique structurel sur vos pages améliorera votre communication avec Google et Bing. Ils veulent, tous les deux, comprendre votre contenu. Ils veulent que vous leur communiquiez clairement dans leur langage et que vous les informiez. Faites-le !

Communication

La communication avec les machines est l'un des deux piliers d'une stratégie de référencement à long terme qui vous permettra de réussir dans le monde de “Moteurs de Réponse”. Il y a beaucoup de choses que vous pouvez faire pour améliorer la communication. Le HTML5 sémantique en est un. Le balisage structuré Schema.org en est un autre. Découvrez mon article précédent pour en savoir plus.

Crédibilité

Le deuxième pilier de la stratégie SEO à long terme est la crédibilité en ligne. Il y a aussi beaucoup de choses que vous pouvez faire pour améliorer votre crédibilité.

Communication + crédibilité = stratégie gagnante

Conclusion

Les rôles, l’importance et la hiérarchie des contenus d’une page web sont des choses que les humains comprennent de façon intuitive à partir de la mise en page. En utilisant correctement les balises HTML5 sémantiques à la place des <div>, vous simplifiez le traitement de vos pages par les machines.

Je vais continuer à écrire régulièrement sur le blog SEMrush et à partager mes techniques pour améliorer le référencement sur Google et Bing.

N’hésitez pas à partager vos réflexions dans les commentaires ci-dessous, et n'hésitez pas à publier vos questions sur la communication et la crédibilité dans le référencement. Vos questions m’aideront à définir les sujets que je devrai aborder en priorité !