La vérité sur plusieurs balises H1 à l'ère HTML5

Que vous soyez un webmaster ou un concepteur web, il y a une question que vous avez probablement posée ou à laquelle vous avez répondu plusieurs fois au fil des ans. Cette question est: "Combien

Puis-je utiliser des balises par page et comment les implémenter? "

Il y a généralement deux raisons pour lesquelles cette question est posée. Le premier et le plus commun est à des fins de référencement; s'assurer que le contenu est formaté de la meilleure façon possible pour faciliter l'indexation par les moteurs de recherche. La seconde est l'exactitude technique; s'assurer que le balisage est écrit conformément à la spécification W3C appropriée.

Avec l'avènement de HTML5, la réponse à cette question a considérablement changé, tant au niveau du référencement naturel que technique. Il est maintenant non seulement possible d'avoir plusieurs

en-têtes de niveau par page Web qui auront du sens pour les moteurs de recherche, mais dans la plupart des cas, il s'agit en fait du cours recommandé.

Cependant, comme la spécification HTML5 n’est pas encore très bien comprise, de nombreux conseils circulent, certains même récemment écrits, sur la base des règles de la conception Web antérieure à HTML5..

Dans ce tutoriel, nous allons clarifier certaines idées fausses. Nous allons jeter un regard en profondeur sur ce que signifie HTML5 pour

l'utilisation des balises, ainsi que la manière dont vous pouvez tirer parti des améliorations actuellement disponibles pour créer des pages Web plus riches et structurées que jamais auparavant.


Le pré HTML5 "Single

Tag "règle

Pendant longtemps, il a été considéré comme l’une des règles fondamentales du langage HTML et du référencement naturel que chaque page d’un site devrait en comporter un.

titre niveau, et un seul. En outre, la règle prescrivait que ce singulier

l'en-tête doit indiquer l'objet principal de la page.

Cette règle a généralement été suivie dans le but d'aider les moteurs de recherche à mieux comprendre l'objet principal de chaque page, afin de déterminer leur pertinence par rapport à différentes expressions de recherche, d'améliorer la précision des moteurs de recherche et, partant, d'améliorer le classement des sites bien conçus..

Prenons un exemple de site Web d'entreprise antérieur à HTML5. Dans cet exemple de site, le nom de l'entreprise est affiché dans la section en-tête de toutes les pages, la page d'accueil contient une description de l'entreprise et, dans une autre partie du site, des articles spécialisés sont publiés..

En suivant le "Single

Balise "règle, la page d'accueil de ce site a

balises appliquées au nom de l'entreprise dans la section d'en-tête, indiquant que l'entreprise elle-même est l'objet principal de cette page.

Cependant, dans un article publié ailleurs sur ce même site Web,

les balises sont supprimées du nom de l'entreprise dans l'en-tête et appliquées à la place au titre de l'article. Cela est dû au fait que le titre de l'article fournit une étiquette plus représentative pour le sujet principal de la page, qui correspond désormais au contenu de l'article et non à la description de l'entreprise figurant sur la page d'accueil..

Une version antérieure à HTML5 de ce site Web serait donc marquée comme suit:


Pourquoi les en-têtes sont-ils importants?

En dépit de la concentration de longue date sur

balises, elles n’ont jamais été un élément fonctionnant isolément, indépendamment du reste du document. Il y a une raison derrière l'importance de placer avec soin les balises de titre dans les ères HTML5 et antérieure à HTML5, et c'est la génération de plans de document.

Les plans de document ressemblent à une table des matières pour un site Web. Ils sont générés automatiquement à partir du balisage sur une page Web donnée..

Avant HTML5, les contours de document étaient générés à partir de l'utilisation des balises d'en-tête.

à travers
. Toute utilisation d'une rubrique impliquerait le début d'une nouvelle section de contenu.

Prenons par exemple le code HTML suivant, en notant le placement de

,

et

balises, qui détermineront le contour du document:

   Exemple de balisage pré-HTML5   

Le bon usage des cacahuètes

Comment manger des cacahuètes

Les cacahuètes peuvent être mangées avec du sel.

Ceci est une utilisation acceptable des arachides.

Méthodes de consommation d'arachides supérieures

Les cacahuètes sont infiniment meilleures lorsqu'elles sont combinées avec du chocolat.

Nous recommandons cette approche pour de meilleurs résultats

Application incorrecte d'arachides

Les cacahuètes ne doivent pas être utilisées pour remplir les parcomètres.

Ils ne seront pas efficaces dans cette capacité.

Avant HTML5, le balisage ci-dessus générerait un plan de document comme suit:

  • 1. (document) Le bon usage des cacahuètes
    • 1. (h2) Comment manger des cacahuètes
      • 1. (h3) Méthodes de consommation d'arachides supérieures
    • 2. (h2) Application incorrecte d'arachides

La première

L'élément est considéré comme l'étiquette du document entier. Les en-têtes suivants sont considérés comme les étiquettes des sections de contenu de ce document, formant un arbre sous celui-ci..

L'exemple ci-dessus est assez simple, mais dans la nature, les pages Web sont rarement aussi simples. Lorsque nous avons besoin d'une présentation de contenu plus complexe, nous nous heurtons au gros problème du balisage pré-HTML5 et à la raison pour laquelle il était auparavant nécessaire d'utiliser un seul

titre niveau par page.

Dans l'exemple ci-dessus, nous abordons un seul sujet: "Le bon usage des arachides". Mais que se passe-t-il si ce sujet est discuté sur une page contenant plusieurs articles d'égale importance, comme vous le verrez peut-être sur un blog, par exemple??

Prenez ce html avec un deuxième article affiché (chaque article est enveloppé dans

Mots clés):

   Exemple de balisage pré-HTML5   

Le bon usage des cacahuètes

Comment manger des cacahuètes

Les cacahuètes peuvent être mangées avec du sel.

Ceci est une utilisation acceptable des arachides.

Méthodes de consommation d'arachides supérieures

Les cacahuètes sont infiniment meilleures lorsqu'elles sont combinées avec du chocolat.

Nous recommandons cette approche pour de meilleurs résultats

Application incorrecte d'arachides

Les cacahuètes ne doivent pas être utilisées pour remplir les parcomètres.

Ils ne seront pas efficaces dans cette capacité.

Haricots bouillants

Faire bouillir des haricots en vaut vraiment la peine?

Soyons honnêtes, ça prend des siècles.

Nous vous conseillons simplement d'acheter des haricots en conserve à la place.

Avant HTML5, ce balisage aurait généré le plan de document suivant:

  • 1. (document) Le bon usage des cacahuètes
    • 1. (h2) Comment manger des cacahuètes
      • 1. (h3) Méthodes de consommation d'arachides supérieures
    • 2. (h2) Application incorrecte d'arachides
  • 2. (h1) Haricots bouillants
    • 1. (h2) Faire bouillir des haricots en vaut vraiment la peine?

Maintenant, même s'il y a deux articles d'égale importance sur la page, le titre du premier article "L'utilisation appropriée des arachides" est toujours interprété comme une étiquette représentant le document entier simplement parce que c'est le premier rencontré. Cela indiquerait donc que tout le sujet de la page est "L'utilisation appropriée des cacahuètes", même si le deuxième article traite d'un sujet totalement différent..

La manière typique de lutter contre cela était de créer un cap fourre-tout avec

des balises partout où plusieurs sections de contenu d'égale importance étaient affichées, dans le but de toutes les représenter dans toute la mesure du possible. Par exemple:

   Exemple de balisage pré-HTML5   

Blog de littérature de légumineuse

Le bon usage des cacahuètes

Comment manger des cacahuètes

Les cacahuètes peuvent être mangées avec du sel.

Ceci est une utilisation acceptable des arachides.

Méthodes de consommation d'arachides supérieures

Les cacahuètes sont infiniment meilleures lorsqu'elles sont combinées avec du chocolat.

Nous recommandons cette approche pour de meilleurs résultats

Application incorrecte d'arachides

Les cacahuètes ne doivent pas être utilisées pour remplir les parcomètres.

Ils ne seront pas efficaces dans cette capacité.

Haricots bouillants

Faire bouillir des haricots en vaut vraiment la peine?

Soyons honnêtes, ça prend des siècles.

Nous vous conseillons simplement d'acheter des haricots en conserve à la place.

Notez l'ajout de la généralisée

étiqueté en-tête, et la rétrogradation de chaque en-tête subséquent d'un niveau.

Le plan de document suivant serait maintenant généré:

  • 1. (document) Blog de littérature de légumineuse
    • 1. (h2) Le bon usage des cacahuètes
      • 1. (h3) Comment manger des cacahuètes
        • 1. (h4) Méthodes de consommation d'arachides supérieures
      • 2. (h3) Application incorrecte d'arachides
    • 2. (h2) Haricots bouillants
      • 1. (h3) Faire bouillir des haricots en vaut vraiment la peine?

Problèmes causés par les contours de document antérieurs au HTML5

Cette ébauche de document, bien que ce soit le meilleur qui puisse être fait avant HTML5, présente quelques problèmes importants:

  • L'étiquette généralisée pour toute la page dilue la pertinence.
    Nous avons le

    tagged titre "Legume Literature Blog" agissant comme étiquette pour la page entière, et pourtant le texte de cette rubrique ne donne qu’une représentation généralisée du contenu. Cela dilue la capacité des moteurs de recherche à interpréter le contenu réel de la page et, partant, sa pertinence pour les expressions de recherche..

  • Les articles séparés sont considérés comme des sous-sections d'un seul contenu.
    Il n'y a aucun moyen de distinguer les deux articles de la même page en tant qu'entités d'égale importance et autonomes. Ils sont tous deux considérés comme faisant partie d’un seul contenu global, même s’ils ne sont pas.
  • Un balisage différent est requis dans différentes zones du site.
    Si un visiteur visualise l’un des articles seul, comme sur un blog classique, le balisage devra être retravaillé afin que le

    les balises sont appliquées au titre de l'article au lieu du titre du site, comme je l'ai démontré avec l'exemple de site Web professionnel dans la section précédente.

  • Il existe des restrictions sur la nature de l'étiquette du document / du titre du site..
    Dans de nombreux cas, un titre de site (qui tend à jouer le rôle d'étiquette de document même en HTML5) peut ne pas avoir de lien significatif avec le contenu d'une page. Par exemple, je pourrais lancer un blog avec le titre du site "Kezz Says" et afficher un article sur le codage HTML et un autre sur les chiots mignons. Dans ce cas, il ne serait pas logique que le titre du site soit interprété comme représentant l'un ou l'autre de ces articles. Je devrais donc changer le nom de mon blog. Cela peut être un problème, en particulier si un site souhaite se marquer avec un nom qui peut être mémorable, mais pas nécessairement significatif.

C'est ici que HTML5 se présente pour sauver la journée et résoudre chacun de ces problèmes.


L'algorithme de contour de document HTML5

Si vous considérez chacun des problèmes décrits ci-dessus, ils ont tous une racine commune et quelque peu simple: L'hypothèse selon laquelle chaque page Web est un document singulier avec un sujet singulier ne nécessitant qu'une étiquette singulière.

La solution tout aussi simple à ces problèmes viendrait de la possibilité d'indiquer si une page Web comportait des sections distinctes, éventuellement avec plusieurs sujets, chacun ayant son propre libellé significatif..

S'il était possible de spécifier que chaque article sur une page était séparé, cela permettrait de les étiqueter avec des titres significatifs qui représentaient leur contenu avec précision, tout en donnant à chacun le même poids d'importance.

S'il était possible d'indiquer clairement lorsqu'un titre de site n'était pas représentatif du contenu de la page, le problème de la dilution de la pertinence serait résolu..

Avec une indication claire à la place de la différence entre le titre du site, les articles et les titres des articles, il ne serait plus nécessaire de changer le balisage d'une zone à une autre. UNE

Le titre du site étiqueté pourrait garder son

balises sur tout le site.

Et comme il serait précisé si le titre du site ne représente pas le contenu de l'article sur la page, il serait possible de le définir à n'importe quoi, aussi abstrait soit-il..

HTML5 rend tout cela possible grâce à l'introduction de ses éléments sémantiques et de l'algorithme de contour de document HTML5.

Aspects clés de l'algorithme de définition de document HTML5

Alors que le contour de document antérieur à HTML5 était uniquement constitué de balises de titre, l'algorithme de contour de document HTML5 utilise les aspects clés suivants:

  • Racine de coupe: Une racine de sectionnement est un conteneur qui fournit une étendue aux sections de contenu discret qui y seront définies. Chaque racine de sectionnement obtient son propre contour. La racine de sectionnement de niveau supérieur de toute page est formée par son balises, donc il y a toujours un contour généré pour toute page Web, à partir de la balises et travaillant à travers les sections, il est divisé en.
    • Tags racine de sectionnement: ,
      ,
      , ,
      , ,
  • Contenu de la section: Chaque racine de sectionnement est divisée en une série de sections de contenu. Ces sections sont créées en plaçant des balises d'élément de contenu de sectionnement autour de contenus discrets. Les éléments de contenu de sectionnement sont imbriquables et sémantiques. Le type à utiliser dépend de la nature du contenu qu'il va contenir. (Nous verrons plus loin comment utiliser chaque élément de contenu de sectionnement.)
    • Balises de contenu de sectionnement:
      ,
      ,
  • Contenu du titre: Étiquettes textuelles pour les sections de contenu. En l'absence de balises de contenu de sectionnement, la présence d'une balise d'en-tête sera toujours interprétée comme le début d'une nouvelle section de contenu…
    • Balises de titre:

      ,

      ,

      ,

      ,
      ,

Comprendre comment ces aspects de HTML5 sont utilisés est relativement simple et le processus se déroule généralement comme suit:

  1. La racine de coupe du document est formée par son Mots clés.
  2. Dans cette racine de sectionnement, le document est divisé en contenu de sectionnement, par exemple. en emballant des articles avec le
    Mots clés.
  3. Les balises d'en-tête sont placées dans les sections de contenu selon les besoins, la première balise de rubrique d'une section faisant office d'étiquette pour cette section..

L'algorithme de contour de document HTML5 comporte de nombreux autres aspects. Des informations détaillées à ce sujet sont disponibles sur le W3C.

Cependant, avec seulement les aspects énumérés ci-dessus, nous sommes en mesure de résoudre tous les problèmes décrits dans la section précédente de ce tutoriel..

Résoudre les vieux problèmes d'esquisse de document

Jetons un autre regard sur notre "Legume Literature Blog", car il pourrait être balisé à l'aide de HTML5. Les modifications simples suivantes ont été apportées:

  1. ajouté pour appeler HTML5
  2. des balises ont été ajoutées pour envelopper chaque article, en remplacement du générique
    Mots clés
  3. Les titres des articles ont été modifiés de

    Jusqu'à

    Mots clés

  4. Les autres balises de titre de chaque article ont été ajustées à la hausse d'un niveau.
  5. Un titre de site de marque / non significatif est utilisé
   Exemple de balisage HTML5   

Whackamoon Legumin!

Le bon usage des cacahuètes

Comment manger des cacahuètes

Les cacahuètes peuvent être mangées avec du sel.

Ceci est une utilisation acceptable des arachides.

Méthodes de consommation d'arachides supérieures

Les cacahuètes sont infiniment meilleures lorsqu'elles sont combinées avec du chocolat.

Nous recommandons cette approche pour de meilleurs résultats

Application incorrecte d'arachides

Les cacahuètes ne doivent pas être utilisées pour remplir les parcomètres.

Ils ne seront pas efficaces dans cette capacité.

Haricots bouillants

Faire bouillir des haricots en vaut vraiment la peine?

Soyons honnêtes, ça prend des siècles.

Nous vous conseillons simplement d'acheter des haricots en conserve à la place.

Maintenant, l'algorithme de contour de document HTML5 nous donnerait ce qui suit:

  • 1. (document) Whackamoon Legumin!
    • 1. (article) Le bon usage des cacahuètes
      • 1. (h2) Comment manger des cacahuètes
        • 1. (h3) Méthodes de consommation d'arachides supérieures
      • 2. (h2) Application incorrecte d'arachides
    • 2. (article) Haricots bouillants
      • 1. (h2) Faire bouillir des haricots en vaut vraiment la peine?

La première chose que vous remarquerez peut-être est l'apparition de la (article) élément dans le plan, et à côté de ceux des titres de chacun de nos articles.

Notez que dans HTML5, 

Les balises sont spécifiquement utilisées pour indiquer "une composition complète ou autonome dans un document, une page, une application ou un site et qui est, en principe, librement distribuable ou réutilisable, par exemple, en syndication. Il peut s'agir d'un post de forum, d'un un article de magazine ou de journal, une entrée de blog, un commentaire soumis par un utilisateur, un widget ou gadget interactif ou tout autre élément de contenu indépendant. " (source: W3C)

L'apparition de la (article) L'élément situé à côté de nos titres d'article, plutôt que les balises de titre comme nous l'avons vu précédemment, nous indique que ces choses se produisent maintenant dans le contour:

  • Chaque article a été reconnu comme un élément de contenu autonome ayant une importance égale pour l'autre..
  • Les titres des articles sont maintenant correctement mis en correspondance avec les articles en tant qu'étiquettes significatives représentant leur sujet..
  • Etant donné que les articles sont correctement étiquetés avec leurs propres en-têtes, le titre du site n'est plus interprété comme étant représentatif du contenu de ces articles..

Cela signifie que tous les problèmes que nous avons décrits précédemment dans ce tutoriel ont été immédiatement résolus:

  • Résolu: L'étiquette généralisée pour toute la page dilue la pertinence.
    Nous n'avons plus aucune dilution de pertinence des étiquettes généralisées, l'étiquette de chaque article y étant clairement associée..
  • Résolu: Les articles séparés sont considérés comme des sous-sections d'un seul contenu.
    La page n'est plus considérée comme un élément unique du contenu, car la présence des balises d'article indique où la page est divisée en sections indépendantes..
  • Résolu: Un balisage différent est requis dans différentes zones du site.
    Parce que tous les

    les balises utilisées dans le balisage sont maintenant correctement interprétées, et nous n'avons plus à nous soucier de la dilution des étiquettes, nous n'avons plus besoin d'appliquer différentes balises au titre du site, elles peuvent rester marquées à l'adresse

    niveau tout au long.

  • Résolu: Il existe des restrictions sur la nature de l'étiquette du document / du titre du site..
    Étant donné que le titre du site n'est plus interprété comme une étiquette pour le contenu de l'article, nous sommes libres de le définir comme bon vous semble. Il n'est plus nécessaire qu'il agisse en tant que représentant "fourre-tout" pour tout le contenu de la page. Il peut donc s'agir d'un titre abstrait ou de marque ne présentant aucun lien avec le contenu de l'article..

Pourquoi plusieurs

Les balises sont correctes

Vous pouvez également voir maintenant, à partir du plan de document HTML5 généré par notre balisage, qu'il est parfaitement correct d'utiliser autant

balises que votre document appelle pour; c'est-à-dire un par section de racine ou de contenu.

Vous pouvez également voir à partir de cet exemple en quoi il serait moins correct de n'utiliser qu'un seul jeu de

balises dans cet exemple, et que plusieurs ensembles de

les balises représentent plus précisément le contenu.

Si vous aviez encore

les balises appliquées uniquement au titre du site, et

balises appliquées aux titres de vos articles, le contour de vos articles serait jeté.

En effet, en balisant les titres de votre article avec

Si vous utilisez des balises, vous dites en réalité qu’il s’agit de rubriques de niveau deux, même s’il s’agit de rubriques de niveau 1
section.

Tour à tour, les sous-titres de deuxième niveau de vos articles seraient nécessairement marqués avec

balises les définissant incorrectement au niveau trois, vos titres de troisième niveau marqués avec

balises et ainsi de suite.

Selon les spécifications HTML5, il est permis d’utiliser des en-têtes de niveau inférieur à

pour étiqueter une section, et parfois pour des raisons de présentation, telles que l’affichage d’un en-tête de taille plus petite dans une section blogroll de la barre latérale. Toutefois, je vous recommande de ne le faire que dans le cas de sections mineures, non-article / contenu, de votre site où il n'est pas prioritaire que les niveaux d'en-tête produisent un plan de document qui constitue efficacement une table des matières..

Dans tous les cas, la meilleure chose à faire est d'examiner attentivement le contenu actuel et de déterminer le meilleur moyen de sectionner et de l'étiqueter en fonction de vos connaissances actuelles sur l'algorithme de définition de document HTML5..


HTML5 est nouveau

Règles d'utilisation

Oui c'est vrai. Vous pouvez maintenant utiliser autant d'ensembles de

balises selon les besoins, via HTML5. Mais cela ne signifie pas qu'ils devraient être librement ajoutés dans des endroits arbitraires.

Tout comme il y avait des règles de

l'utilisation des balises provenant d'anciens schémas de document, il en va de même pour les nouvelles règles basées sur l'algorithme de hiérarchisation des documents HTML5.

Les voici en un coup d’œil:

  • Utilisez un ensemble de

    balises par section de racine de sectionnement ou de contenu.

  • Il devrait toujours y avoir un

    cap niveau entre l'ouverture balise et la première section de contenu, pour étiqueter le document global.

  • Lorsqu'un

    En-tête de niveau doit être utilisé pour étiqueter une section de contenu; il doit s'agir du premier en-tête qui apparaît dans la section, car le premier en-tête est toujours interprété comme étant l'étiquette de la section..

  • Si un

    En-tête de niveau est utilisé pour étiqueter une section de contenu. Tous les autres en-têtes utilisés dans cette section doivent avoir une valeur inférieure ou égale à H2 afin de créer un contour de document précis..

Comme je l'ai mentionné ci-dessus, les étiquettes de section ne sont absolument pas avoir être

Mots clés. La spécification HTML5 permet à n’importe quelle balise de titre d’agir en tant que libellé d’une section, à partir de

à travers
. Encore une fois cependant, je recommande toujours d’utiliser

balises de niveau pour baliser le contenu de l'article.

Mais si vous décidez d'utiliser une balise autre que

pour une étiquette de section, assurez-vous de suivre les mêmes règles que celles énumérées ci-dessus, en remplaçant

dans chaque règle avec votre tag choisi.


À propos des étiquettes d'élément de contenu de sectionnement

Il n’existe que quatre ensembles de balises d’élément que vous pouvez utiliser pour désigner les sections de contenu de votre page Web, mais ils peuvent être un peu difficiles à comprendre..

Elles sont:

Les deux que vous allez probablement utiliser le plus sont

et
Mots clés. Ils sont semblables les uns aux autres, mais avec une distinction importante.

les balises doivent être utilisées lorsqu'une partie du contenu peut être complètement retirée d'une page tout en ayant un sens par elle-même, sans contenu environnant.

les balises, en revanche, doivent être utilisées pour les contenus regroupés selon un thème, mais n'ayant de sens que dans le contexte du contenu les entourant.

Pour des exemples détaillés sur la façon d'utiliser chacune de ces balises, prenez un moment pour consulter ces pages W3C:

  • L'élément Article
  • L'élément de section