• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 19/01/2023

Structurez votre page

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Utilisez la balise  <header> pour l'en-tête

La plupart des sites web possèdent un <header>(en-tête, en français). On y trouve le plus souvent, à minima, un logo. On le place, pour des raisons de cohérence, en tête du code, donc au début de la balise   <body>  :

<header>
<!-- Placez ici le contenu de l'en-tête de votre page -->
</header>

L'en-tête peut contenir tout ce que vous voulez : une image pour un logo, liens, du texte pour le slogan de votre marque par exemple, un bouton d'appel à l'action… Généralement, on préfère que cela reste clair et lisible donc on évite de surcharger le  <header>  avec trop d'éléments.

Voici par exemple l’en-tête du site de La Fourche :

L'en-tête du site web de La Fourche contient une image pour le logo, une barre de recherche, un bouton d'appel à l'action, un lien de connexion à son espace personnel et l'icône du panier pour visualiser le contenu du panier.

Utilisez la balise  <footer>  pour le pied de page

À l'inverse de l'en-tête, le pied de page se trouve tout en bas de la page. On y trouve généralement des informations comme des liens de contact, les mentions légales, la politique de confidentialité, etc.

<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

Voici le pied de page de la page d’accueil du site de La Fourche :

Le pied de page du site web de La Fourche contient entre autres des boutons pour télécharger l'application sur l'App Store et Google Play, des liens utiles sur l'entreprise ou encore des modalités comme la livraison ou le paiement sécurisé.
Le pied de page du site web de La Fourche

Utilisez la balise  <nav> pour le menu de navigation

La balise <nav>  doit regrouper tous les principaux liens de navigation du site. Vous y placerez par exemple le menu principal de votre site. Généralement, le menu est réalisé sous forme de liste à l'intérieur de la balise<nav> .

Voici le menu sur le site de La Fourche :

Le menu de navigation du site web de La Fourche contient des liens rapides vers des vues triées selon les besoins de recherche possibles de l'utilisateur, comme les produits d'origine France ou encore les produits de la marque La Fourche.
Le menu de navigation du site web de La Fourche

Ici on pourrait avoir, de façon simplifiée :

<nav>
<ul>
<li>
<a href="#">Nouveautés</a>
</li>
<li>
<a href="#">Anti-gaspi</a>
</li>
<li>
<a href="#">Origine France</a>
</li>
<li>
<a href="#">Marque La Fourche</a>
</li>
</ul>
</nav>

Utilisez la balise  <main>  pour le contenu principal de la page

La balise <main> permet de déclarer le contenu principal de votre page. Elle englobe la majeure partie du  <body>  d'une page, en excluant les autres éléments tels que le  <header>, le  <footer>  et de potentiels  <aside>. La balise <main> doit être unique : il n'y en a qu'une seule par page :

<main>
</main>

Utilisez des balises  <section>  pour structurer le contenu du  <main>

La balise <section>  sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page.

<section>
</section>

Sur la page d'accueil du site de La Fourche, on trouve plusieurs blocs qui pourraient être considérés comme des sections de page :

Le contenu principal de la page d'accueil de La Fourche contient différentes sections. On y voit les étapes par lequel le client passe, de l'adhésion jusqu'à la livraison par exemple.
Le contenu principal de la page d'accueil de La Fourche

Utilisez une balise  <aside>  pour des contenus additionnels dans le  main

Il existe d'autres balises pour structurer une page, comme <aside> par exemple, qui permet de contenir des informations complémentaires au document que l'on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation). Il peut y avoir plusieurs blocs <aside>  dans la page. Sur Wikipédia, par exemple, il est courant de voir à droite un bloc d'informations complémentaires à l'article que l'on visualise.

Pour résumer :

Le header, situé en haut prend toute la largeur ; comme la zone de navigation, nav, qui vient dessous. Ensuite, on a une zone de contenu main, à gauche ; avec des sections et une zone de contenu complémentaire, aside, à droite.
Exemple de structure d'une page web

Ne vous y trompez pas : ce schéma propose un exemple d'organisation de la page. Rien ne vous empêche de décider que votre menu de navigation soit à droite, ou tout en haut, que vos balises  <aside>  soient au-dessus, etc.

Ce code peut vous aider à comprendre comment les balises doivent être agencées. Vous y reconnaissez un en-tête, un menu de navigation, un pied de page… et, au centre, deux sections incluses dans  <main>  .

Eh mais… la page ne ressemble à rien, c'est normal ?

Pour l'instant, vous avez juste du texte noir sur fond blanc. C'est normal, il n'y a pas de CSS ! Par contre, la page est bien structurée, ce qui va nous être utile pour la suite. Vous pouvez d'ailleurs totalement appliquer le style souhaité à ces balises, comme vous le feriez pour toutes les balises que vous avez utilisées jusqu'à maintenant.

Je ne comprends pas l'intérêt de ces balises. On peut obtenir le même résultat sans les utiliser, non ?

C'est vrai. En fait, ces balises sont seulement là pour expliquer à l'ordinateur :

“Ceci est l'en-tête”.

“Ceci est mon pied de page”, etc.

Mais qui dit que l'ordinateur comprend veut aussi dire que le contenu sera également plus lisible par des outils d'assistance dans le cadre de l'accessibilité.

Elles n'indiquent pas, contrairement à ce qu'on pourrait penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous le verrons dans peu de temps maintenant.

À l'intérieur de ces balises structurantes, comme vous l'avez sûrement vu dans le bout de code embarqué, vous pouvez également utiliser des balises universelles  <div>  et  <span>  afin de créer des blocs au sein de votre contenu, qui vous permettront ensuite de leur appliquer du style.

À vous de jouer !

C'est le moment de mettre en pratique ce que vous venez d'apprendre dans le portfolio de Robbie Lens. Pour cela, vous allez :

  • intégrer un  <header>  dans les pages d'accueil et Á propos ;

  • intégrer un   <footer>  dans ces même pages ;

  • ajouter  <main>  là où c'est nécessaire ;

  • basculer vos liens hypertextes de navigation dans une balise  <nav>  ;

  • adapter les déclarations CSS en fonction des modifications faites. 

En résumé

  • Plusieurs balises permettent de délimiter les différentes zones qui constituent la page web :

    • <header>  : en-tête ;

    • <footer>  : pied de page ;

    • <nav>  : liens principaux de navigation ;

    • <section>  : section de page ;

    • <aside>  : informations complémentaires ;

    • <article>  : article indépendant.

  • Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.

  • Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur la fonction du texte qu'elles encadrent. On pourrait très bien placer l'en-tête en bas de la page, si on le souhaitait.

Vous savez maintenant comment structurer correctement vos pages web ! Passons au prochain chapitre : vous allez découvrir le modèle des boîtes, il s'agit d'une autre façon de structurer une page web, mais cette fois à l'aide du CSS, on y va !

Exemple de certificat de réussite
Exemple de certificat de réussite