Les secrets des balises structurelles du HTML5 sémantique

64
Wow-Score
Le Wow-Score montre la capacité d'engagement d'un billet de blog. Il est calculé en fonction de la corrélation entre le temps de lecture actif de l'utilisateur, sa vitesse de défilement et la longueur de l'article.
En savoir plus

Les secrets des balises structurelles du HTML5 sémantique

Cet article est en Français
Jason Barnard
Cet article est en Français
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 :

Balises HTML5 non sémantiques

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 :

Balises HTML5 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.

Page web sans balisage HTML5 sémantique

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) :

Balises HTML5 sémantiques structurels

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) :

Page Web avec simple de balisage HTML5 structurelle

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.

Page Web avec balises HTML5 Section et Article

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

aside pertinent-html5-semantique-kalicube.png

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

aside-non-pertinent-html5-semantique-kalicube.png

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

Balisage Sémantique HTML5 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.

Sections HTML5

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.

Page web avec mauvais balisage HTML5

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 credibility

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.

comparaison-visuelle-robot-kalicube.png

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é !

telechargement-1.png

Vous aimez cet article ? Suivez-nous via le RSS et lisez d'autres articles intéressants :

RSS
Almost 2 decades of experience: I started promoting my first website in the year Google was incorporated and built it up to become one of the top 10,000 most visited sites in the world.
Today I am a search marketing consultant, speaker and author on all things search / answer engine optimisation :)

My column will outline how we in the world of SEO can successfully segue into AEO – Answer Engine Optimization. I will develop the details of the two major concepts your AEO strategy should center on: communication and credibility. Within these concepts, luckily for us, most (white hat) SEO tactics we use today will remain
Partager cet article
ou

Commentaires

Il reste 2000 caractères
Lionel K.
Très bon article ! J'avais une question : est-ce qu'on mettre une balise article APRÈS la balise main, au lieu de la mettre dedans. Merci
Jason Barnard
Lionel K.
Merci Lionel
Si tu as un outil de recherche en bas de la page, ca pourrait etre une utilisation. Tu pourrais mettre puis

pour le outil de recherche.
Guillaume Guersan
J'ai vérifié mon thème WordPress et j'ai bien la balise

(donc je suis déjà assez content) mais pour le reste, mon thème est à parfaire :-)
Peter Lewit
Très bon article ! Toutefois je ne suis pas d'accord avec la comparaison des balises section et article. La balise section permet de déterminer des blocs dans un contenu et se réfère souvent au visuel alors que la balise article délimite un contenu en fonction du sujet... ainsi il peut y avoir plusieurs articles dans une page de type news ou blog ou encore e-commerce. .. pour le reste je vous rejoins complètement . Je rajouterais qu'une structure claire est un indispensable pour un site qui est tourné vers l'a11y afin que tous, valides ou non, puissent avoir accès à l'information.
Jason Barnard
Peter Lewit
Bonjour Peter
Merci pour le compliment :)
Egalement merci pour l'analyse section / article. Les règles pour leur utilisation est moins bien défini que les autres elements et (pour moi) nos deux visions sont valables.
Patrick DUHAUT
Article très intéressant. une question : quid de Wordpress dans ce contexte ?
Jason Barnard
Patrick DUHAUT
Merci Patrick

Wordpress = bien...
- pour le header
- pour le footer
- mais entre les deux ca dépend du thème. le HTML5 sémantique structurelle de la partie contenu va faire la différence, et souvent les thèmes ne sont pas à la hauteur.

MAIS, déjà un bon HTML5 sémantique pour le header et le footer est un plus - hors Wordpress, peu de sites le font bien :)
Stéphane Briot
Patrick DUHAUT
Se tourner vers des framework comme Genesis. Ils sont déjà plus respectueux des standards de WP, embarquent moins de fioritures, utilisent les thèmes enfants (thème père = framework / thème enfant = design appliqué sur le framework), et certains embarquent déjà ces balises.
Patrick DUHAUT
Stéphane Briot
Merci, mon prochain site sera donc l'occasion d'essayer ! ;-)

Abonnez-vous au Blog SEMrush pour obtenir du contenu précieux directement dans votre boîte

Saisir une adresse e-mail valide
Veuillez confirmer que vous acceptez nos Conditions d'utilisation et notre Politique de confidentialité.

Merci !

Votre inscription à notre blog est enregistrée.