Aller au contenu principal

Structurer une page

Utiliser les balises de division et les balises HTML5 pour structurer une page HTML

Notions théoriques​

Les balises de division​

Les balises de division comme <div> et <span> sont des balises qui permettent de grouper d'autres éléments et de leur appliquer un style ou un comportement spécifique.

  • La balise <div> est une balise de bloc. Elle est utilisée pour regrouper des éléments.

    Par défaut, une balise <div> commence sur une nouvelle ligne et prend toute la largeur disponible.

    Voici un exemple d'utilisation de la balise <div> :

    <div id="header">
    <h1>Titre de la page</h1>
    </div>

  • La balise <span> est une balise en ligne. Elle est utilisée pour regrouper un petit morceau de texte sur la même ligne.

    Voici un exemple d'utilisation de la balise <span> :

    <p>Ceci est un <span class="highlighted">texte mis en évidence</span> dans un paragraphe.</p>
astuce

La balise de division <div> et la balise <span> sont souvent utilisées avec des attributs de classe ou d'ID pour appliquer du style CSS.

Les balises HTML5​

Les balises HTML5, comme <header>, <footer>, <section> et <article>, permettent de diviser une page en parties qui ont une signification sémantique :

  • <header> est utilisé pour le contenu de l'en-tête du document ou d'une section,
  • <footer> pour le pied de page,
  • <section> pour une section de contenu distincte
  • et <article> pour un contenu autonome à l'intérieur d'une section.

Ces balises permettent de donner une structure claire et logique à notre page, ce qui est important :

  • pour la lisibilité du code,
  • pour l'accessibilité
  • pour le référencement du site.
astuce

L'accessibilité d'un site Web, signifie rendre le site accessible à tous, y compris aux personnes ayant des handicaps.

Cela peut inclure des personnes ayant des déficiences visuelles, auditives, motrices ou cognitives.

  • Par exemple, une personne malvoyante peut utiliser un lecteur d'écran, qui lit à voix haute le contenu d'une page Web.

    Pour cela il faut que notre page contienne les balises HTML appropriées, les attributs alt pour les images, etc.

Les balises à connaître​

  • <div> : Une balise générique de division qui peut contenir d'autres éléments.
  • <span> : Une balise générique de division en ligne qui peut contenir du texte ou d'autres éléments en ligne.
  • <header> : Utilisée pour le contenu de l'en-tête du document ou d'une section.
  • <footer> : Utilisée pour le contenu du pied de page du document ou d'une section.
  • <section> : Utilisée pour une section de contenu distincte.
  • <article> : Utilisée pour un contenu autonome qui pourrait être distribué indépendamment du reste de la page.
  • <nav> : Utilisée pour une section destinée à la navigation.

Les balises spéciales​

Les balises auto-fermantes​

  • Certaines balises sont conçues pour envelopper le contenu, comme <p> pour les paragraphes ou <h1> pour les titres.

    Ces balises ont une balise d'ouverture, par exemple <p>, et une balise de fermeture, par exemple </p>.

attention

Il est important de toujours fermer les balises qui enveloppent un contenu pour que le navigateur sache où le contenu enveloppé commence et finit.

  • Certaines balises en HTML sont appelées balises "auto-fermantes", car elles n'enveloppent pas de contenu.

    Par exemple, la balise <br/> est utilisée pour insérer un saut de ligne. Il est techniquement correct d'écrire simplement <br>, mais pour des raisons de compatibilité avec les anciennes versions du HTML et du XHTML, il est recommandé d'écrire <br/>.

Les balises déconseillées​

Lors de la création de votre page, n'utilisez pas de balises de mises en forme

Au fil des années, les standards du Web ont évolué, et avec eux, les meilleures pratiques pour créer des sites Web. Dans les premières versions du HTML, il était courant d'utiliser des balises de formatage direct comme <b> pour rendre le texte gras ou <i> pour le rendre italique. Aujoud'hui ces balises sont déconseillées.

Inconvénients d'une balise de mise en forme :

  1. Elle mélange le contenu (ce qui est dit) avec la présentation (comment cela est dit). Car cela rend le site Web plus difficile à mettre à jour.

    Si vous voulez changer l'apparence de votre site, vous devez parcourir tout votre code HTML et modifier chaque balise de formatage.

  2. Elle n'est pas accessible. Les balises de formatage ne fournissent pas d'informations sémantiques aux les lecteurs d'écran.

    Par exemple, un lecteur d'écran ne peut pas dire à un utilisateur malvoyant que le texte est en gras ou en italique.

Pour toutes ces raisons, il est aujourd'hui recommandé d'utiliser le CSS pour gérer la présentation de votre page.

Au lieu d'utiliser la balise <b>, vous pouvez utiliser la propriété CSS font-weight: bold;.

De même, au lieu d'utiliser la balise <i>, vous pouvez utiliser la propriété CSS font-style: italic;.

Cela vous permet de garder votre HTML propre et sémantique, tout en donnant à votre page l'apparence que vous souhaitez.

Fonctionnement du DOM​

  1. HTML -> DOM

Le navigateur lit le code HTML et construit le DOM

  1. DOM -> UI

Le navigateur place les éléments du DOM à l'écran pour afficher l'interface utilisateur

Mise en pratique​

Pour illustrer l'utilisation de ces balises, prenons l'exemple d'une page simple :

<!DOCTYPE html>
<html>
<head>
    <title>Ma page</title>
</head>
<body>
    <header>
        <h1>Bienvenue sur ma page!</h1>
    </header>
    <section>
        <h2>A propos de moi</h2>
        <p>Je suis un passionné de Web!</p>
    </section>
    <footer>
        <p>Contactez-moi à monadresse@email.com</p>
    </footer>
</body>
</html>

Dans cet exemple, nous avons :

  • une balise <header> qui contient le titre de la page,
  • une balise <section> qui contient une section à propos de moi,
  • et une balise <footer> qui contient les informations de contact.

Test de mémorisation/compréhension​


Quelle balise doit-on utiliser pour le contenu de l'en-tête du document ou d'une section ?


Quelle balise est utilisée pour un contenu autonome qui pourrait être distribué indépendamment du reste de la page ?


Quelle balise est une balise générique de division en ligne qui peut contenir du texte ou d'autres éléments en ligne ?


Quelle balise est utilisée pour une section de contenu distincte ?


Quelle balise est une balise générique de division qui peut contenir d'autres éléments ?


Quelle balise est une balise utilisée pour une section destinée à la navigation ?


TP pour réfléchir et résoudre des problèmes​

  1. Dans votre répertoire "Documents" créez le répertoire tp_jeu_prefere

  2. Dans le répertoire tp_jeu_prefere, créez le fichier index.html

  3. Pour ce TP, votre défi sera de créer une page HTML qui présente votre jeu vidéo préféré.

    Vous devrez utiliser les balises de structuration pour diviser votre page en sections logiques :

    • un en-tête avec le titre du jeu,
    • une section principale avec une description du jeu,
    • une autre section pour expliquer pourquoi vous aimez ce jeu
    • et un pied de page avec vos informations de contact.
Une solution
<!DOCTYPE html>
<html>
<head>
    <title>Mon jeu vidéo préféré</title>
</head>
<body>
    <header>
        <h1>Mon jeu vidéo préféré : The Legend of Zelda: Breath of the Wild</h1>
    </header>
    <section>
        <h2>A propos du jeu</h2>
        <p>The Legend of Zelda: Breath of the Wild est un jeu d'aventure qui vous permet de parcourir un monde ouvert fantastique, de résoudre des énigmes et de combattre des ennemis pour sauver le royaume d'Hyrule.</p>
    </section>
    <section>
        <h2>Pourquoi j'aime ce jeu</h2>
        <p>Ce que j'aime dans ce jeu, c'est la liberté qu'il offre. Vous pouvez explorer le monde à votre rythme, découvrir de nouveaux lieux, résoudre des énigmes et vous immerger dans l'histoire. De plus, les graphismes sont magnifiques et la bande sonore est fantastique.</p>
    </section>
    <footer>
        <p>Contactez-moi à monadresse@email.com</p>
    </footer>
</body>
</html>