Balises de Titre (Headings) en HTML - Tutoriel

Introduction

Les balises de titre, de <h1> à <h6>, sont utilisées en HTML pour structurer le contenu de la page en définissant différents niveaux de titres. Ce tutoriel explore l'utilisation correcte de ces balises pour une hiérarchie de contenu claire.

Exemples

Exemple 1 : Utilisation de la Balise <h1>

Le niveau de titre le plus élevé, généralement utilisé pour le titre principal de la page :

       <h1>Titre Principal</h1>

Exemple 2 : Utilisation de la Balise <h2>

Un sous-titre, utilisé pour organiser le contenu sous le titre principal :

       <h2>Sous-Titre</h2>

Exercices avec Corrections

Exercice 1 : Structurer la Page avec les Balises de Titre

Utilisez les balises <h1> à <h3> pour structurer une page web avec un titre principal, un sous-titre, et un titre de section :

       <h1>Page d'Accueil</h1>
        <h2>Introduction</h2>
        <h3>Objectifs du Tutoriel</h3>

Questions à Choix Multiple (QCM)

1. Quelle balise de titre est généralement utilisée pour le titre principal de la page?
   • A. <h3>
   • B. <h1>
   • C. <h5>

   Réponse correcte : B

Questions & Réponses

Question : Quelle est la différence entre les balises <h1> et <h2>?

Réponse : <h1> est utilisé pour le titre principal, tandis que <h2> est utilisé pour un sous-titre ou une section importante sous le titre principal.

Études de Cas

Cas d'utilisation : Création d'un Article avec Titres

Structurez un article avec des balises de titre pour le titre principal, les sections, et les sous-sections :

       <h1>Titre de l'Article</h1>
        <h2>Introduction</h2>
        <h3>Première Section</h3>

Éléments à Retenir

• Les balises de titre, de <h1> à <h6>, sont utilisées pour structurer le contenu.
• <h1> est généralement utilisé pour le titre principal, suivi de <h2> pour les sous-titres, et ainsi de suite.
• Il est important de maintenir une hiérarchie logique pour une meilleure compréhension du contenu.

Proposition d'un Examen avec Correction

1. Quelle balise de titre est généralement utilisée pour le titre principal de la page?
   • A. <h3>
   • B. <h1>
   • C. <h5>

   Correction : B

<h1>Titre principal</h1>

<h2>Sous-titre</h2>

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<h2>Introduction</h2>
<p>Ceci est une introduction à la page web.</p>

<h3>Liste des tâches</h3>
<ul>
  <li>Tâche 1</li>
  <li>Tâche 2</li>
  <li>Tâche 3</li>
</ul>

<h4>Tableau des résultats</h4>
<table>
  <thead>
    <tr>
      <th>Colonne 1</th>
      <th>Colonne 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Valeur 1</td>
      <td>Valeur 2</td>
    </tr>
  </tbody>
</table>