Comment utiliser correctement les balises d'en-tête HTML

Chaque site Web est son propre monstre unique, les développeurs et les concepteurs mettant leur propre voix dans le code. Mais un élément que chaque site Web a en commun est les balises d'en-tête HTML. Non seulement ces en-têtes divisent votre contenu en sections plus lisibles, mais ils créent le contour sémantique de votre site afin que les moteurs de recherche et les logiciels d'accessibilité puissent dire exactement quel contenu constitue le site. Il existe parfois une certaine confusion quant à l'utilisation et à la fonction correctes des balises d'en-tête HTML, nous souhaitons donc passer en revue les 6 niveaux et discuter de la manière et du moment de les utiliser correctement.

Abonnez-vous à notre chaîne Youtube

Pourquoi utiliser des balises d'en-tête HTML ?

Comme nous l'avons dit plus haut, ces balises créent le squelette de votre site. Sans eux, non seulement le titre et l'objectif de votre site ne sont pas clairs, mais le contenu semble aux utilisateurs et aux robots comme s'il s'agissait d'un mur de texte géant, même si vous le divisez en paragraphes.

De plus, les lecteurs d'écran et les logiciels d'accessibilité les utilisent pour parcourir votre contenu (parfois littéralement). Ainsi, si vous n'incluez pas de balises d'en-tête HTML, votre site devient inaccessible à de nombreuses personnes, car elles ne peuvent tout simplement pas se déplacer dans la page et le contenu.

De plus, les moteurs de recherche et autres robots d'exploration Web qui accèdent à votre site naviguent également via vos titres. Récemment, Google a pris en compte la sémantique du code dans ses classements, ce qui signifie que l'intention de recherche est très lourde. Vos balises d'en-tête HTML en sont une partie importante, indiquant à Google et aux visiteurs où trouver des informations spécifiques sur la page, organisées par importance hiérarchique.

Et chaque balise de votre page aide tout cela à sa manière.

La hiérarchie des balises est importante

La hiérarchie des balises d'en-tête HTML est importante. L'ordre dans lequel vous utilisez ces balises peut faire ou défaire le référencement de votre site. Bien que vous puissiez les styliser à l'aide de CSS et rendre une balise H6 plus grande, plus audacieuse et plus lumineuse qu'une H2, vous devriez toujours essayer de les garder dans l'ordre afin de ne pas confondre les robots (et les lecteurs).

Pensez aux balises dans l'ordre croissant comme s'il s'agissait des en-têtes du plan de votre article. Vous devriez seulement (en général), mettre un nombre plus élevé sous son prédécesseur immédiat. Vous pouvez les imbriquer autant de profondeur que vous le souhaitez, mais assurez-vous de ne mettre que le suivant dans l'ordre à chaque fois.

Voici un exemple :

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

Il peut y avoir des cas spécifiques où vous avez un seul H6 au-dessus d'un H4, mais pour la plupart, Google et d'autres moteurs de recherche déterminent la priorité des sujets et évaluent l'efficacité du contenu par rapport à l'intention de recherche en utilisant des titres pour naviguer dans votre contenu.

Balises H1

La balise H1 est peut-être la plus simple des balises d'en-tête HTML, tout en étant également l'une des plus mal comprises. Dans la plupart des cas, vous verrez l'en-tête H1 comme titre d'une page ou d'un article particulier. C'est ce que les moteurs de recherche afficheront (probablement) dans les résultats. Votre navigateur l'affichera également probablement dans sa barre de titre, bien que de nombreux plugins de référencement et applications similaires vous permettent de le modifier pour ceux-ci. Pour cette raison, bien qu'il soit important d'avoir votre phrase clé cible dans la balise H1, ce n'est pas nécessaire à 100%. Écrivez vos titres et titres de manière sémantique pour couvrir l'intention de recherche des visiteurs au lieu de bourrer les mots-clés des balises d'en-tête HTML.

L'image ci-dessus montre une balise H1 utilisée comme titre d'entrée pour un article sur le blog Elegant Themes. C'est aussi la seule balise H1 sur la page. Cela indique qu'il s'agit du sujet du contenu de la page.

Pendant des années, la pratique courante consistait à avoir une (et une seule) balise H1 par page. Pour la plupart, cela reste un bon conseil. Google et d'autres moteurs de recherche explorent votre page et recherchent la balise H1. Ils l'utilisent ensuite pour déterminer le sujet, le titre et la structure.

Cependant, Google a déclaré explicitement que le fait d'avoir plusieurs balises d'en-tête HTML H1 sur votre site n'entraîne aucune pénalité de référencement. Cela ne veut pas dire devenir fou en les utilisant partout sur votre site, mais cela signifie que vous pouvez en utiliser plus d'un par page lorsque le besoin s'en fait sentir.

Quand utiliser plusieurs en-têtes H1

Le seul but d'un H1 est d'indiquer une section complète sur un seul sujet. Cela signifie que si vous avez une seule page qui a plus d'un sujet, vous voudriez utiliser un H1 pour chaque nouveau sujet sur cette page. Cela indiquerait à Google que votre page ne concerne pas uniquement le sujet du titre. Mais il pourrait aussi y avoir une section sur un sujet complètement différent (mais lié) plus bas.

Sur les sites Web d'une seule page, cela est également important car vous pouvez avoir une section À propos, Tarification, Contact et Portefeuille sur cette seule page. Alors, comment faire savoir à Google que le contenu contenu dans chaque section est sa propre unité autonome ?

Les balises H1, c'est comme ça. Vous traitez chaque section comme s'il s'agissait de sa propre mini-page Web, en utilisant la hiérarchie dont nous avons parlé ci-dessus dans chacune. De cette façon, Google voit les en-têtes au fur et à mesure qu'il navigue sur la page, et il peut ensuite déterminer à partir de laquelle de ces sections extraire les extraits en vedette (et ainsi de suite) pour répondre aux questions des chercheurs.

Vous pouvez également choisir d'utiliser une balise H1 chaque fois que vous utilisez une balise de section sur votre site, mais nous vous suggérons de ne le faire que lorsqu'il s'agit d'une section d'importance parallèle au titre de la page, plutôt qu'une section subordonnée.

Balises H2

Les balises H2, désormais, seront probablement la balise d'en-tête HTML la plus utilisée sur vos pages. Et pour une bonne raison. La plupart des articles et des pages sur Internet se composent d'un seul sujet avec seulement quelques sous-titres. Nous recommandons que chaque élément de contenu que vous créez contienne au moins une balise H2. Yoast et d'autres plugins SEO suggèrent un titre tous les 300 mots environ. Selon votre contenu, c'est à cela que servent les balises H2.

Ils séparent les sous-thèmes (ou étapes) pour faciliter la lecture. Par exemple, la plupart de nos messages se composent principalement de rubriques H2 (avec H3 le cas échéant). C'est parce que nos articles portent sur un seul sujet, où nous essayons de résoudre un seul problème. Nous aurons le titre tel que Comment utiliser OBS Studio pour diffuser en direct en tant que H1, mais les sous-titres tels que « Comment démarrer avec OBS Studio » seront en H2.

La balise H2 représente les étapes individuelles qui se rapportent directement au sujet H1. Dans ce post particulier, nous avons utilisé la structure suivante :

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

Les balises d'en-tête H2 de cet article passent en revue les idées principales, telles que la mise en route et le téléchargement, la configuration du logiciel lui-même, puis l'ajustement de la façon dont votre écran apparaît aux téléspectateurs. Bien qu'il y ait des étapes impliquées sous celles de H3, également, les en-têtes H2 indiquent l'image à grande échelle de l'article. Il s'agit d'une vue de haut niveau que les robots d'exploration et les lecteurs pourront parcourir pour voir si l'article contient les informations qu'ils recherchent.

En général, vous aurez plusieurs balises H2 par article, alors que vous pourriez ne pas avoir de sous-titres imbriqués sous eux. Si votre page ou votre article porte sur un seul sujet qui n'est pas divisé en sections avec des sous-sections comme dans l'exemple ci-dessus, il serait préférable d'avoir plusieurs balises H2 que H2 -> H3 -> H4 imbriquées car celles-ci indiquent aux robots que vous ' re plonger plus profondément sur un suptopic que d'étendre sur le sujet principal du poste.

Balises H3

Les balises H3, en revanche, sont l'endroit où vos articles peuvent vraiment approfondir les détails de votre sujet. Vous ne devez jamais utiliser ces balises H3 directement sous un H1. Les Googlebots et les moteurs de recherche les voient absolument comme des sous-titres. Alors que H2 est accepté comme titre principal pour les sections d'un seul article (avec le H1 déclarant le sujet principal comme titre, rappelez-vous).

Si vous regardez attentivement l'image ci-dessus, vous verrez que le style et la taille réels entre nos balises H2 et H3 ne sont pas très différents. La raison étant, nous ne voulons pas que vous supposiez en scannant que tout point que nous faisons dans un H3 est moins important qu'un H2. Parce que ce n'est pas le cas.

Sa taille est seulement plus petite pour indiquer qu'il s'agit d'un point subordonné au H2, plutôt que d'un lien direct avec le sujet global, ce qui est le plus important d'un point de vue structurel en ce qui concerne le référencement de votre article. Pour les lecteurs humains, plutôt que pour les robots, la distinction visuelle aide simplement à les déplacer vers le bas de la page et à décomposer les informations pour les analyser plus facilement.

Balises H4, H5, H6

Nous les avons regroupés pour une raison. En général, vous aurez du mal à trouver des sites qui utilisent pleinement la gamme H1 à H6 de balises d'en-tête HTML. De loin, la structure la plus populaire est H1 à H3. Tout comme vous voyez rarement un contour de contenu au-delà du deuxième niveau imbriqué.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

Pour la plupart, la balise H4 aura le même objectif que H3. Vous les utiliserez pour entrer dans le détail des étapes et des exemples, mais toujours imbriqués sous vos rubriques principales. Les concepteurs les stylisent généralement avec un CSS plus petit que H3. Ils ont tendance à voir une utilisation limitée dans la création de contenu ordinaire. Un sujet a tendance à être très approfondi si les idées doivent être décomposées de manière à ce qu'une balise d'en-tête H4 soit nécessaire.

H5 et H6

Vous pouvez utiliser les en-têtes H5 et H6 de différentes manières.

La première voie

(Juste pour un exemple, nous avons divisé cette section particulière en plusieurs parties via l'en-tête, et nous sommes maintenant sous H4 car il s'agit d'un sous-sujet de l'article principal.)

Ces titres sont souvent utilisés dans les tables des matières et les listes similaires, bien que leur fonction principale soit techniquement la même que les autres, délimitant des sujets d'importance décroissante tout au long de la page. Il sera assez rare de trouver un document avec une gamme complète de titres jusqu'à H6.

La deuxième voie

Certaines personnes utilisent les balises H5 et H6 comme en-têtes de mise en forme « spécialisée ». Ils appliqueront un CSS spécial à ces deux balises d'en-tête HTML qui est complètement différent de H1 à H4. Vous pouvez ensuite les utiliser pour attirer l'attention sur des sujets et des idées qui pourraient autrement être négligés.

Ce n'est pas techniquement la meilleure pratique, car les en-têtes sont hiérarchiques. Cependant, si votre site est bien structuré dans l'ensemble et que vous utilisez H5 et H6 avec parcimonie comme styles spécialisés sur certaines pages ou publications individuelles, vous ne subirez presque certainement aucun coup de référencement.

N'oubliez pas que même lorsque vous les utilisez pour un formatage spécial, vous ne sortez pas de la hiérarchie. Gardez-les en ordre. Donc, si vous utilisez H6 pour styliser un sous-titre, assurez-vous que le prochain que vous utilisez est un H1 ou H2 pour montrer que vous êtes revenu à la structure standard.

Ce qu'il ne faut pas faire avec les balises d'en-tête HTML

Ne structurez pas une seule page avec toute la hiérarchie des titres jusqu'en bas. Vous êtes mieux avec un H1 pour un titre et tous les H2, plutôt que chaque en-tête successif étant imbriqué.

Oui:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

Non:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

De plus, vous ne voulez pas utiliser les titres au hasard. Ne les utilisez que dans l'ordre. Sinon, les robots d'exploration n'auront aucune idée de la façon de naviguer sur votre page, pas plus que les logiciels d'accessibilité.

Non:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

En général, vous pouvez supposer qu'un robot saura que vous êtes sorti d'une sous-section lorsqu'il trouvera le prochain H1 ou H2. Dans l'extrait de code ci-dessus, les robots d'exploration et les robots auraient du mal à analyser la structure des informations.

Conclusion avec les balises d'en-tête HTML

Et tu vois ? Nous revenons à un H2 en route pour conclure. Les balises de titre sont un élément important de chaque site Web. Les utiliser correctement peut augmenter votre classement dans les moteurs de recherche, ainsi que l'expérience utilisateur de votre site, car les visiteurs pourront plus facilement trouver les informations qu'ils recherchent dans votre contenu. N'oubliez pas de ne pas utiliser trop de mots-clés dans vos rubriques. Bien que ce soit une bonne idée d'inclure les mots-clés ou les phrases dont vous parlez pour vous assurer que vos idées sont claires, les Googlebots et autres sont assez intelligents et peuvent dire quand vous avez échangé des sujets ou êtes sur le même. Dans l'ensemble, l'utilisation de balises d'en-tête HTML est extrêmement importante, mais si vous gardez quelques éléments à l'esprit, vos sites brilleront en un rien de temps.

Utilisez-vous correctement les balises d'en-tête HTML ?

Image sélectionnée de l'article par VectorV / shutterstock.com