Utilisation de la balise <section> en HTML

Introduction

En HTML, la balise <section> est utilisée pour diviser un document en plusieurs sections pour plus de clarté et de distinction. C'est un élément sémantique qui peut être utilisé pour des sections autonomes ou des sections imbriquées dans un document. Ce laboratoire vous guidera tout au long des étapes simples pour utiliser la balise <section> dans un fichier HTML.

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

Ajoutez une section de base

Tout d'abord, créez un fichier index.html dans votre éditeur de code préféré. Ce fichier contiendra le code HTML avec lequel nous allons travailler.

Commencez par ajouter une section de base en utilisant la balise <section>. Cela peut se faire comme suit :

<section>
  <h1>Titre de la section</h1>
  <p>Le contenu de la section est ici.</p>
</section>

Dans le code ci-dessus, h1 et p sont respectivement des balises HTML pour le titre et le paragraphe. La balise h1 définit un en-tête de niveau supérieur pour la section et la balise p est utilisée pour ajouter un contenu textuel à la section.

Ajoutez une sous-section

Vous pouvez également créer une sous-section à l'intérieur d'une section en utilisant l'imbrication des balises <section>. Par exemple :

<section>
  <h1>Titre de la section</h1>
  <p>Le contenu de la section est ici.</p>

  <section>
    <h2>Titre de la sous-section</h2>
    <p>Le contenu de la sous-section est ici.</p>
  </section>
</section>

Dans le code ci-dessus, nous avons une section contenant une autre section imbriquée qui sert de sous-section. La balise h2 à l'intérieur de la section imbriquée définit l'en-tête de la sous-section, et la balise p ajoute un contenu textuel à la sous-section.

Stylisation avec CSS

Par défaut, la balise <section> est un élément de niveau de bloc en HTML. Vous pouvez utiliser CSS pour styliser l'élément <section>, tout comme avec n'importe quel autre élément HTML. Voici un exemple :

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

Dans le code ci-dessus, une balise style est utilisée pour contenir le CSS pour la balise <section>. Le code CSS ajoute une bordure, un rembourrage et une marge à l'élément <section>. Vous pouvez ajuster ces propriétés selon vos préférences.

Ajoutez plus de sections

Enfin, vous pouvez ajouter autant de sections que nécessaire à votre fichier HTML. N'oubliez pas de suivre la structure des balises de section d'ouverture et de fermeture.

<section>
  <h1>Section 1</h1>
  <p>Le contenu est ici.</p>
</section>

<section>
  <h1>Section 2</h1>
  <p>Le contenu est ici.</p>
</section>

<section>
  <h1>Section 3</h1>
  <p>Le contenu est ici.</p>
</section>

Résumé

La balise <section> en HTML est un élément sémantique utilisé pour diviser un document en plusieurs sections pour plus de clarté et de distinction. Elle permet de créer des sections autonomes et des sous-sections imbriquées dans un document. Grâce aux étapes fournies dans ce laboratoire, vous pouvez désormais ajouter des balises <section> à vos fichiers HTML, les personnaliser avec CSS et améliorer l'organisation et la lisibilité de vos documents.