Création d'un conteneur de contenu principal en HTML

Introduction

En HTML, la balise <main> est utilisée pour représenter le contenu principal ou dominant du document. C'est une balise nouvellement introduite en HTML5 et est généralement écrite à l'intérieur de la balise <body>. Le contenu de la balise <main> devrait être unique et directement lié au sujet central du document. C'est un concept similaire à un repère, qui permet d'identifier rapidement et de faciliter la navigation dans un document volumineux.

Dans ce laboratoire, nous allons apprendre à utiliser la balise <main> pour créer un conteneur de contenu principal en HTML.

Note : Vous pouvez pratiquer le codage dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer 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.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 95%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Configuration du fichier HTML

Créez un nouveau fichier et nommez-le index.html. Ouvrez-le dans votre éditeur de code préféré.

Dans la section <head> du fichier HTML, ajoutez le code suivant :

<!doctype html>
<html>
  <head>
    <title>Création d'un conteneur de contenu principal en HTML</title>
  </head>
  <body></body>
</html>

Ajout d'un en-tête et d'un pied de page

Pour que notre page web ait l'air complète, nous allons ajouter un en-tête et un pied de page.

Ajoutez le code suivant entre les balises <body> de votre fichier HTML :

<header>
  <h1>Mon site web</h1>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos de nous</a></li>
      <li><a href="#">Contactez-nous</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Bienvenue sur mon site web. Cette est la zone de contenu principale.</p>
</main>

<footer>
  <p>&copy;2021 Mon site web. Tous droits réservés.</p>
</footer>

Le code ci-dessus définit un en-tête avec un menu de navigation, une balise <main> et un pied de page.

Ajout de contenu à la balise main

Maintenant que nous avons configuré notre en-tête et notre pied de page, nous pouvons ajouter du contenu à la balise main.

Ajoutez le code suivant entre les balises <main> :

<main>
  <h2>À propos de nous</h2>
  <p>
    Nous sommes une société spécialisée dans les services de développement web.
    Notre équipe est composée de développeurs web expérimentés qui peuvent vous
    aider à créer un site web qui contribuera à la croissance de votre
    entreprise.
  </p>
  <h2>Nos services</h2>
  <ul>
    <li>Conception web</li>
    <li>Développement web</li>
    <li>Référencement (Search Engine Optimization)</li>
    <li>Réseaux sociaux marketing</li>
  </ul>
  <h2>Notre portfolio</h2>
  <p>Voici quelques-uns des sites web que nous avons créés :</p>
  <ul>
    <li><a href="#">Site web 1</a></li>
    <li><a href="#">Site web 2</a></li>
    <li><a href="#">Site web 3</a></li>
  </ul>
</main>

Vérification du code HTML final

Après avoir ajouté la zone de contenu principale, votre code HTML devrait ressembler à ceci :

<!doctype html>
<html>
  <head>
    <title>Création d'un conteneur de contenu principal en HTML</title>
  </head>
  <body>
    <header>
      <h1>Mon site web</h1>
      <nav>
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">À propos de nous</a></li>
          <li><a href="#">Contactez-nous</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>À propos de nous</h2>
      <p>
        Nous sommes une société spécialisée dans les services de développement
        web. Notre équipe est composée de développeurs web expérimentés qui
        peuvent vous aider à créer un site web qui contribuera à la croissance
        de votre entreprise.
      </p>
      <h2>Nos services</h2>
      <ul>
        <li>Conception web</li>
        <li>Développement web</li>
        <li>Référencement (Search Engine Optimization)</li>
        <li>Réseaux sociaux marketing</li>
      </ul>
      <h2>Notre portfolio</h2>
      <p>Voici quelques-uns des sites web que nous avons créés :</p>
      <ul>
        <li><a href="#">Site web 1</a></li>
        <li><a href="#">Site web 2</a></li>
        <li><a href="#">Site web 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 Mon site web. Tous droits réservés.</p>
    </footer>
  </body>
</html>

Sommaire

Dans ce laboratoire, nous avons appris à utiliser la balise <main> pour créer un conteneur de contenu principal dans un document HTML. Nous avons créé un en-tête, une zone de contenu principal et un pied de page avec des contenus d'exemple. Rappelez-vous que le contenu de la balise <main> devrait être unique et directement lié au sujet central du document. En utilisant la balise <main>, nous pouvons créer une section facilement identifiable du site web qui aidera les utilisateurs à naviguer avec facilité.

Contenu principal HTML

Introduction

Coder directement depuis le tutoriel.

Configuration du fichier HTML

Ajout d'un en-tête et d'un pied de page

Passez de la théorie à la pratique.

Ajout de contenu à la balise main

Vérification du code HTML final

Interagissez avec le code en temps réel.

Sommaire