Balises HTML <h1> à <h6>

Définition et utilisation

<h1> à <h6> Les balises sont utilisées pour définir les titres HTML.

<h1> Définir le titre le plus important.<h6> Définir le titre le moins important.

Attention

Chaque page utilise une seule <h1> - Cela devrait représenter le titre principal ou le thème principal de la page. De plus, n'oubliez pas de ne pas sauter le niveau de titre - <h1> commencer, puis utiliser <h2>et ainsi de suite.

Les éléments h ont une sémantique précise, donc veuillez choisir soigneusement le niveau de balise approprié pour construire la structure du document. Par conséquent, n'utilisez pas les balises de titre pour changer la taille de la police sur la même ligne. Au lieu de cela, nous devrions utiliser les définitions de feuilles de style en cascade pour obtenir un affichage magnifique.

Si vous souhaitez en savoir plus sur les étiquettes HTML et leur utilisation, veuillez lire laQualité Web》。

Voir également :

Tutoriel HTML :Titres HTML

Manuel de référence HTML DOM :Objet Heading

Exemple

Exemple 1

Six différents titres HTML :

<h1>Ceci est le titre 1</h1>
<h2>Ceci est le titre 2</h2>
<h3>Ceci est le titre 3</h3>
<h4>Ceci est le titre 4</h4>
<h5>Ceci est le titre 5</h5>
<h6>Ceci est le titre 6</h6>

Essayer vous-même

Exemple 2

Définir la couleur de fond et la couleur du texte du titre (utilisez CSS) :

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h2 style="color:Tomato;">Hello World</h2>

Essayer vous-même

Exemple 3

Définir l'alignement du titre (utilisez CSS) :

<h1 style="text-align:center">Ceci est le titre 1</h1>
<h2 style="text-align:left">Ceci est le titre 2</h2>
<h3 style="text-align:right">Ceci est le titre 3</h3>
<h4 style="text-align:justify">Ceci est le titre 4</h4>

Essayer vous-même

Attributs globaux

<h1> - <h6> Les balises prennent également en charge Attributs globaux dans HTML。

Attributs d'événement

<h1> - <h6> Les balises prennent également en charge Attributs d'événement dans HTML。

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h1> Élément :

Exemple 1

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h2> Élément :

Exemple 2

h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h3> Élément :

Exemple 3

h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h4> Élément :

Exemple 4

h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h5> Élément :

Exemple 5

h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <h6> Élément :

Exemple 6

h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

Essayer vous-même

Compatibilité des navigateurs

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support