Aller au contenu principal

Les listes

Les listes en HTML et création d'un menu de navigation

Notions théoriques​

Les listes sont un outil essentiel pour organiser l'information sur une page Web.

En HTML, nous avons 2 types principaux de listes :

  • les listes à puces <ul>,
  • et les listes ordonnées <ol>.

Liste à puces​

Dans une liste à puces <ul>, chaque élément de la liste est marqué par un point <li> :

<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
  • Premier élément
  • Deuxième élément
  • Troisième élément
Bonne pratique - ul vs ol

Utilisez <ul> pour les listes dont l'ordre n'importe pas (ingrédients, fonctionnalités) et <ol> pour les listes ordonnées (étapes, classements).

Liste ordonnée​

Dans une liste ordonnée <ol>, chaque élément est numéroté <li> :

<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
  1. Premier élément
  2. Deuxième élément
  3. Troisième élément
astuce

Un menu de navigation est généralement une liste de liens vers les principales sections d'un site. Il est souvent créé en utilisant une liste à puces avec des liens.

Exemple pratique​

Supposons que vous voulez ajouter un menu de navigation à votre site sur votre jeu vidéo préféré. Vous pouvez le faire avec une liste et des liens.

<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="histoire.html">Histoire du jeu</a></li>
  <li><a href="personnages.html">Personnages</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
Bonne pratique - Menu de navigation semantique

Un menu de navigation est une liste non ordonnée <ul> stylée en CSS — la structure sémantique reste une liste, même si l'apparence est différente.

Les balises à connaître​

  • <ol> : Crée une liste ordonnée (ordered list).
  • <ul> : Crée une liste à puces (unordered list).
  • <li> : Définit un élément de liste (list item).

Test de mémorisation/compréhension​


Quelle balise est utilisée pour créer une liste ordonnée ?


Quelle balise est utilisée pour créer une liste à puces ?


Quelle balise est utilisée pour définir un élément de liste ?


Comment créer un menu de navigation avec des liens ?


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

Pour ce TP, vous allez créer un menu de navigation pour votre site sur votre jeu vidéo préféré.

Le menu doit contenir des liens vers les principales sections de votre site.

<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="histoire.html">Histoire du jeu</a></li>
  <li><a href="personnages.html">Personnages</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>
Bonne pratique - Placement du menu

Placez le menu dans <header> ou <nav> pour indiquer sa fonction de navigation aux lecteurs d'écran.

Une solution