Heading facebook twitter youtube

Les balises <h1> à <h6>

 

Les éléments de type <hX> X représente un chiffre entre 1 et 6 correspondent à des titres (heading en anglais) de niveaux différents.

<h1> est un titre de premier niveau,<h2> un titre de deuxième niveau, et ainsi de suite jusqu’au petit dernier <h6>.

Bien qu’il ne soit pas invalide de sauter des niveaux (par exemple passer de <h2> à <h5>), cette pratique est fortement déconseillée par la spécification HTML, car la conversion vers d’autres types de contenu ou la constitution d’une liste cohérente de la hiérarchie du document peuvent devenir problématiques.

Les styles par défaut des titres suivent une même trame. Il s’agit de blocs possédant des marges de dimensions variables et des tailles de polices décroissantes selon

 

Exemple des titres

<body>
  <h1>Titre de niveau 1</h1>
  <h2>Titre de niveau 2</h2>
  <h3>Titre de niveau 3</h3>
  <h4>Titre de niveau 4</h4>
  <h5>Titre de niveau 5</h5>
  <h6>Titre de niveau 6</h6>
</body>

balise titre h1 h2

 

Style par défaut

h1 {
  display: block;
  font-size: 2em;
  margin: .67em 0 .67em 0;
  font-weight: bold;
  }

h2 {
  display: block;
  font-size: 1.5em;
  margin: .83em 0 .83em 0;
  font-weight: bold;
 }

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

h4 {
  display: block;
  margin: 1.33em 0 1.33em 0;
  font-weight: bold;
}

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

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

En HTML 5, les sections <nav>, <article>, <aside> et <section> définissent les grands ensembles thématiques du document, d’après leur ordre et leur imbrication.

Ils possèdent des en-têtes et titres respectifs qui doivent être pris en compte par l’outline, parmi lesquels <hgroup> et <h1> à <h6>. Dès lors, l’algorithme est défini par plusieurs grands principes :

 

  1. Il faut considérer le premier en-tête de chaque section comme titre de cette même section.
  2. Tous les éventuels autres titres – hormis ceux placés de concert dans le premier <hgroup> s’il existe – créent des sections implicites. Sont concernés à cet effet tous les titres <h1> à <h6> non contenus dans <hgroup>, et chaque <hgroup>.
  3. L’élément <header> n’est pas concerné par cet algorithme, et n’affecte ni l’out line, ni la création implicite de sections ou de titres.
  4. Le découpage explicite des portions par les éléments de section précités y participe bien évidemment aussi.

 

Exemple

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mon document HTML5</title>
</head>
<body>
<header>
  <h1>Titre principal</h1>
  <nav>
    <ul>
      <li><a href="/">Accueil</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>
<section>
  <h1>Section 1</h1>
  <section>
      <h1>Section 1.1</h1>
      <p>...<p>
      <section>
          <h1>Section 1.1.1</h1>
          <p>...<p>
      </section>                                                             
      <section>
          <h1>Section 1.1.2</h1>
<header>
            <p>...</p>
          </header>
          <article>
            <h1>Titre de l'article</h1>
            <h2>Titre de niveau 2</h2>
          </article>
      </section>                                                             
  </section>      
</section>
<section>
  <hgroup>
    <h1>Section 2</h1>
    <h2>Sous-titre</h2><!-- ignoré -->
  </hgroup>
  <section>
      <h1>Section 2.1</h1>
      <p>...<p>
  </section>
  <section>
      <h1>Section 2.2</h1>
      <p>...<p>
  </section>
</section>
<aside>
  <h2>Titre d'une zone latérale</h2>
  <h3>Sous-titre d'une zone latérale</h3>
</aside>
</body>
</html>

 

 

 



  • section

    section

    Élément fondamental de la nouvelle approche de découpe sémantique des documents,

    .......
    Voir Plus
  • article

    article

    Il possède une plus forte valeur sémantique, et pour cela il faut le considérer comme une portion de document qui se suffit à elle-même, par exemple une entrée distincte parmi d’autres.

    .......
    Voir Plus
  • header

    header

    Comme son nom le suggère, <header> correspond à un en-tête de section. Il peut s’agir de l’en-tête général du document
    <body>, s’il est placé de telle sorte dans la hi&eac

    .......
    Voir Plus
  • footer

    footer

    La balise <footer> est utilisée pour décrire le pied de page d'un document ou d'une section

    .......
    Voir Plus
  • nav

    nav

    La balise <nav> détermine une section dans laquelle sont regroupés des liens de navigation vers d'autres pages

    .......
    Voir Plus
  • aside

    aside

    Permet de déclarer une section associée soit à la balise

  • address

    address

    La balise <address> est utilisée pour indiquer un contenu de type adresse mail. Ce tag doit être fermé avec le tag </address>.

    .......
    Voir Plus
  • hgroup

    hgroup

    L’élément <hgroup> regroupe un ou plusieurs titres <h1> à <h6>. Idéalement, il n’a de vocation à être utilisé qu’à partir de deux titres, car il

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces