Les balises (ou tags) HTML <h> permettent de donner à votre document HTML ou à vos contenus la structure de base nécessaire. À l’aide des différents types de balise disponibles comme <h1> ou <h2>, vous améliorez la lisibilité et la hiérarchie de votre site, tant pour les moteurs de recherche que pour vos utilisateurs

Hébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Qu’est-ce qu’une balise HTML ?

Les balises (ou tags) HTML heading sont des éléments HTML qui vous permettent de définir des titres dans un document HTML. Ce type spécifique de balises HTML revêt une importance à la fois structurelle et sémantique pour les sites Web et répond notamment aux objectifs suivants :

  • Hiérarchie et structure : les balises d’en-tête aident les visiteurs et les moteurs de recherche à comprendre plus facilement votre contenu et sa structure.
  • Optimisation des moteurs de recherche : l’utilisation correcte des tags HTML <h1> et autres peut influencer positivement votre classement dans les moteurs de recherche. En particulier, l’utilisation de mots-clés importants dans les titres vous permet de gagner des points décisifs.
  • Mise en page et design : les tags HTML heading sont indispensables pour une mise en page graphique confortable. Dans votre feuille de style CSS, vous définissez de manière centralisée l’apparence des différents types d’en-têtes, et les modifications ultérieures du design se répercutent immédiatement sur tous les en-têtes avec le tag HTML <h>.
  • Accessibilité : les lecteurs d’écran recourent aux titres HTML pour pouvoir lire vos contenus de manière judicieuse et compréhensible aux personnes avec un handicap visuel.
Note

La balise d’en-tête <h> pour les titres ne doit pas être confondue avec la balise header<header>. Cette dernière est utilisée pour définir la zone d’en-tête globale d’un document HTML ou d’un site Web. On y trouve des éléments tels que des logos et des noms de marque, une navigation ou des éléments CTA.

Quels sont les types de balises heading HTML ?

Les balises <h1> à <h6> sont prévues pour le marquage des titres HTML. <h1> représente l’en-tête le plus important, qui est identifié dans la mise en page par la plus grande police de caractères. Avec le type <h6>, on définit l’en-tête qui est le moins important et qui occupe le niveau le plus bas dans la hiérarchie.

  • HTML <h1> : le titre <h1> constitue le titre principal d’un site Web. Il devrait donc toujours refléter le thème principal ou le titre de l’ensemble de la page. L’utilisation de mots-clés est ici particulièrement efficace et importante.
  • HTML <h2> : la balise <h2> permet de définir les principaux sous-titres. Ils introduisent des paragraphes qui sont en rapport avec le thème principal annoncé dans le <h1>.
  • HTML <h3> à <h6> : les tags <h3> à <h6> sont utilisés pour les sous-titres qui introduisent des sous-paragraphes ou des contenus imbriqués dans une section <h2>.

À l’exception de <h1>, vous pouvez utiliser tous les types d’en-têtes HTML plusieurs fois par page. Il est important de ne pas sauter de niveau : une section <h2> ne doit donc pas être suivie d’un contenu sous un titre <h4>.

Nom de domaine
Votre domaine en un clic
  • 1 certificat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une configuration DNS simplifiée

Syntaxe et exemple des tags HTML <h>

Les titres HTML s’intègrent dans un document de la même manière, typique des balises HTML. Avec une balise d’ouverture, vous définissez le début d’un en-tête, et une balise de fermeture marque la fin de l’en-tête. Le nombre des deux balises doit toujours être identique. La syntaxe se présente donc comme suit (ici à titre d’exemple pour un tag HTML <h1>) :

<h1>*TEXTE*</h1>
html

Illustrons l’utilisation des tags HTML heading à l’aide d’une page d’un blog de cuisine qui servira d’exemple. Les contenus de la page sont structurés de manière claire à l’aide de sous-titres de type <h2> et <h3>. De cette manière, les utilisateurs peuvent naviguer facilement entre les différentes catégories de recettes :

<!DOCTYPE html>
<html>
<body>
<h1>Idées recettes d’entrées, de plats et de desserts</h1>
<p>Découvrez de délicieuses recettes et des astuces culinaires.</p>
<h2>Snacks et entrées</h2>
<p> Petits plats et entrées pour les petits creux.</p>
<h3>Salades</h3>
<p>Des idées de salades fraîches et croquantes.</p>
<h3>Dips et tartinades</h3>
<p>Délicieuses recettes de dips et tartinades.</p>
<h2>Plats principaux</h2>
<p>De bons petits plats pour chaque occasion.</p>
<h3>Plats végétariens</h3>
<p>Des recettes végétariennes saines mais toujours goûtues.</p>
<h3>Plats de viande</h3>
<p>Viande en sauce ou grillée, des recettes toujours variées.</p>
<h2>Desserts</h2>
<p>Desserts et douceurs sucrées pour bien terminer le repas.</p>
<h3>Gâteaux et tartes </h3>
<p>Des recettes de pâtisserie pour se régaler.</p>
<h3>Glaces et sorbets</h3>
<p>Les recettes parfaites pour des glaces rafraîchissantes.</p>
</body>
</html>
html
Cet article vous a-t-il été utile ?
Aller au menu principal