Maîtriser les titres HTML : une approche structurée du contenu web

Introduction

Les titres HTML sont essentiels lorsqu'il s'agit de créer une page web bien structurée. Ils fournissent une hiérarchie et aident les lecteurs à naviguer rapidement sur un site web. Dans ce laboratoire, vous allez apprendre à créer les différents niveaux de titres HTML à l'aide des balises <h1> à <h6>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"Titres HTML de différents niveaux"}} html/head_elems -.-> lab-70769{{"Titres HTML de différents niveaux"}} html/text_head -.-> lab-70769{{"Titres HTML de différents niveaux"}} html/doc_flow -.-> lab-70769{{"Titres HTML de différents niveaux"}} html/inter_elems -.-> lab-70769{{"Titres HTML de différents niveaux"}} end

Ajout de la structure de base HTML

La première étape consiste à créer un fichier HTML nommé index.html. Vous pouvez utiliser n'importe quel éditeur de texte tel que Bloc-notes, Éditeur de texte ou Sublime Text.

Ajoutez la structure HTML de base à votre fichier index.html en tapant <!DOCTYPE html> sur la première ligne et les balises <html></html> respectivement sur la deuxième et la dernière ligne.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Ajout de la section

Dans les balises <html>, créez la section <head> à l'aide de la balise <head>. Dans la section <head>, ajoutez le titre de votre page web à l'aide de la balise <title>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
</html>

Création de la section

Créez la section <body> à l'aide des balises <body></body>. Dans la section <body>, ajoutez les différents niveaux de titres à l'aide des balises <h1> à <h6>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <h2>Premier sous-titre</h2>
    <h3>Second sous-titre</h3>
    <h4>Troisième sous-titre</h4>
    <h5>Quatrième sous-titre</h5>
    <h6>Cinquième sous-titre</h6>
  </body>
</html>

Assurez-vous de remplacer "Titre principal" et les sous-titres par vos propres titres pertinents.

Groupement de titres à l'aide de `<hgroup>`

Vous pouvez regrouper plusieurs titres à l'aide de la balise <hgroup>. Dans l'exemple ci-dessous, nous regroupons les trois derniers titres à l'aide de <hgroup>.

<!doctype html>
<html>
  <head>
    <title>Ma page web</title>
  </head>
  <body>
    <h1>Titre principal</h1>
    <h2>Premier sous-titre</h2>
    <h3>Second sous-titre</h3>
    <h4>Troisième sous-titre</h4>
    <hgroup>
      <h4>Quatrième sous-titre partie 1</h4>
      <h5>Quatrième sous-titre partie 2</h5>
      <h6>Quatrième sous-titre partie 3</h6>
    </hgroup>
  </body>
</html>

Enregistrez votre fichier index.html et ouvrez-le dans un navigateur web pour voir les titres que vous avez créés.

Sommaire

Dans ce laboratoire, vous avez appris à créer des titres HTML à l'aide des balises <h1> à <h6>. Les titres sont essentiels pour créer une page web bien structurée et ils contribuent également à l'optimisation pour les moteurs de recherche. Rappelez-vous que chaque fichier HTML devrait contenir seulement une balise <h1>, pour le titre principal de la page.

Titres HTML de différents niveaux