W3Docs

Apparence

Français

Balises HTML <h1>-<h6> ​

Les éléments <h1> à <h6> sont utilisés pour définir six niveaux de titres HTML, <h1> étant le niveau le plus élevé (ou le plus important) et <h6> le moins important.

TIP

Chaque page web ne doit contenir qu’un seul titre <h1>. Comme les moteurs de recherche l’utilisent pour indexer la structure et le contenu des documents web, veillez à y inclure des mots-clés.

Les agents utilisateurs peuvent utiliser les informations de titre pour créer automatiquement une table des matières d’un document.

Si vous souhaitez redimensionner le texte, il vaut mieux ne pas utiliser les balises de titre. Vous pouvez plutôt utiliser la propriété CSS font-size. Il est recommandé de ne pas sauter de niveaux de titre (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) et de n’utiliser <h1> qu’une seule fois sur une page.

Les balises de titre ont également une valeur SEO. Un moteur de recherche essaie de déterminer deux choses à propos de votre page : de quoi elle parle et quelle est sa qualité. L’un des principaux éléments que les moteurs de recherche examinent pour déterminer le contenu d’une page est le texte contenu dans les balises de titre.

Lorsqu’une page contient un seul contenu, son titre principal doit se trouver dans une balise <h1>, et les sections plus importantes doivent être incluses dans <h2>, et ainsi de suite. De cette façon, vous pouvez mieux organiser votre contenu. Vous devez vous rappeler que personne ne lit chaque mot d’un contenu.

Il existe deux types de pages de contenu : les pages à contenu unique et les pages d’index. Sur les pages à contenu unique, le titre de ce contenu doit se trouver dans <h1> près du début de <body>. Sur une page d’index, le titre du site ou le nom de l’index est généralement placé dans <h1>. Ensuite, les titres de toutes les parties individuelles सूचीées doivent utiliser des balises <h2>.

Comme les balises <h1> à <h6> sont des éléments de niveau bloc, elles commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible.

Par défaut, les balises <h1>-<h6> ont les propriétés suivantes : margin-left, margin-right, font-weight, display.

Balises HTML <h1>-<h6>

css
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;

Syntaxe ​

Les balises <h1>-<h6> vont par paires, donc la balise de fermeture est requise.

Exemple des balises HTML <h1>-<h6> : ​

Balises HTML <h1>-<h6>

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>First-level heading</h1>
    <h2>Second-level heading</h2>
    <h3>Third-level heading</h3>
    <h4>Fourth-level heading</h4>
    <h5>Fifth-level heading</h5>
    <h6>Sixth-level heading</h6>
  </body>
</html>
Try it Yourself »

Résultat ​

Exemple avec six niveaux de titres HTML

DANGER

Les éléments <h1>-<h6> ne doivent pas être utilisés pour baliser des sous-titres, des sous-titres secondaires, des titres alternatifs et des slogans, sauf s’ils sont destinés à être le titre d’une nouvelle section ou sous-section.

TIP

Comme l’attribut align n’est pas pris en charge en HTML5, utilisez plutôt la propriété CSS text-align.

Exemple de la balise HTML <h1> : ​

Exemple de la balise HTML <h1> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #224cc5;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>First-level heading</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>
Try it Yourself »

Exemple de la balise HTML <h2> : ​

Exemple de la balise HTML <h2> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        color: #22c599;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Second-level heading</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Exemple de la balise HTML <h3> : ​

Exemple de la balise HTML <h3> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #bc22c5;
        font-size: 20px;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <h3>Third-level heading</h3>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Exemple de la balise HTML <h4> : ​

Exemple de la balise HTML <h4> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h4 {
        color: #1c87c9;
        margin: 10px 0;
        letter-spacing: 4px;
        text-indent: 50px;
      }
    </style>
  </head>
  <body>
    <h4>Fourth-level heading</h4>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Exemple de la balise HTML <h5> : ​

Exemple de la balise HTML <h5> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h5 {
        background-color: #1c87c9;
        color: #ffffff;
        text-transform: uppercase;
        padding: 15px 20px;
      }
    </style>
  </head>
  <body>
    <h5>Fifth-level heading</h5>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Exemple de la balise HTML <h6> : ​

Exemple de la balise HTML <h6> :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h6 {
        font-style: italic;
        font-family: sans-serif;
        color: #401cc9;
        font-size: 16px;
        line-height: 1.625;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h6>Sixth-level heading</h6>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Attributs ​

AttributValeurDescription
alignleft right center justifyDéfinit l’alignement horizontal du contenu de la balise. Non pris en charge en HTML 5.

Les balises <h1> à <h6> prennent en charge les attributs globaux et les attributs d’événement.

Comment styliser des balises HTML <h1>-<h6>

json
{
    "tag_name": "h1-h6"
}

Practice ​

Which of the following is true about HTML heading tags?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.