# HTML : formater les titres avec les tags HTML heading

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

## 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/) 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](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/lecteurs-decran-logiciels-pour-malvoyants-et-non-voyants/) 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](https://www.ionos.fr/digitalguide/web-marketing/vendre-sur-internet/quest-ce-quun-call-to-action-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>`.

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

```html
<h1>*TEXTE*</h1>
```

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 :

```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>
<div class="hash d-none" hidden>hash_ff054c9a4165159c2b3a71c9e206efd6ef013bb9</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-heading-les-balises-den-tete/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-heading-les-balises-den-tete/) for AI/LLM consumption.