HTML & CSS - Le Guide du Débutant
Chapitre 5 - Créer et gérer des listes en HTML

Les listes non ordonnées

Une liste non ordonnée est une liste dont les éléments ne suivent pas un ordre particulier. En HTML, on crée une liste non ordonnée avec la balise paire <ul> (unordered list). Chaque élément de la liste est défini avec la balise paire <li> (list item). Voici un exemple simple : 

<ul>
  <li>Pomme</li>
  <li>Cerise</li>
  <li>Banane</li>
</ul>

Dans la plupart des navigateurs web, les éléments d'une liste non ordonnée sont affichés avec des puces (des petits cercles) devant chaque élément. La liste non ordonnée est très souvent utilisée pour les menus de navigation des sites web entre autres.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les listes ordonnées

Une liste ordonnée est une liste dont les éléments suivent un ordre particulier, généralement numérique ou alphabétique. En HTML, on crée une liste ordonnée avec la balise paire <ol> (ordered list). Chaque élément de la liste est défini avec la balise paire <li> (list item). Voici un exemple simple : 

<ol>
  <li>Pomme</li>
  <li>Cerise</li>
  <li>Banane</li>
</ol>

Dans la plupart des navigateurs web, les éléments d'une liste ordonnée sont affichés avec des numéros devant chaque élément. L'utilisation de lettres est également possible. La liste ordonnée est souvent utilisée pour les instructions, les étapes à suivre ou les classements.

Pour utiliser les lettres au lieu des chiffres, on peut utiliser l'attribut type dans la balise <ol>. Par exemple, pour utiliser des lettres majuscules, on peut écrire : 

<ol type="A">
  <li>Pomme</li>
  <li>Cerise</li>
  <li>Banane</li>
</ol>

Les valeurs possibles pour l'attribut type sont :

Astuce :
Si le comportement par défaut des listes doit être modifié, il est préférable d'utiliser du CSS plutôt que l'attribut type. Cela permet de séparer le contenu de la présentation et d'avoir un code HTML plus propre.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les listes imbriquées

Les listes imbriquées sont des listes qui contiennent d'autres listes à l'intérieur de leurs éléments. En HTML, on peut imbriquer des listes non ordonnées et ordonnées en plaçant une liste (<ul> ou <ol>) à l'intérieur d'un élément de liste (<li>). Voici un exemple de liste non ordonnée imbriquée : 

<ul>
  <li>
    Le langage HTML
    <ul>
      <li>Les balises</li>
      <li>La balise head</li>
      <li>La balise body</li>
    </ul>
  </li>
  <li>
    Le langage CSS
    <ul>
      <li>Présentation du CSS</li>
      <li>Mise en forme du HTML</li>
    </ul>
  </li>
</ul>

Dans cet exemple, la liste principale est une liste non ordonnée qui contient deux éléments : "Le langage HTML" et "Le langage CSS". Le premier élément contient une autre liste non ordonnée avec trois éléments : "Les balises", "La balise head" et "La balise body".

Attention :
Pour une meilleure lisibilité du code HTML, il est recommandé d'indenter correctement les listes imbriquées. Chaque niveau d'imbrication doit être décalé par rapport au niveau précédent. De plus, il est important de veiller à bien fermer toutes les balises ouvertes pour éviter les erreurs d'affichage dans les navigateurs web.

Il est également possible de mélanger les types de listes dans une liste imbriquée. Par exemple, on peut avoir une liste ordonnée à l'intérieur d'une liste non ordonnée, ou vice versa. Voici un exemple : 

<ol>
  <li>
    Le langage HTML
    <ul>
      <li>Les balises</li>
      <li>La balise head</li>
      <li>La balise body</li>
    </ul>
  </li>
  <li>
    Le langage CSS
    <ul>
      <li>Présentation du CSS</li>
      <li>Mise en forme du HTML</li>
    </ul>
  </li>
</ol>

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html

Les listes → Application

Maintenant que vous avez appris à créer et gérer des listes en HTML, il est temps de mettre en pratique vos connaissances avec un exercice d'application. Dans cet exercice, vous allez créer une page web qui présente différentes vidéos sur les listes en HTML. Vous devrez utiliser les balises appropriées pour structurer votre contenu et organiser les vidéos en utilisant des listes ordonnées. Voici le résultat escompté :

  1. Les listes non ordonnées

    2. Cette vidéo présente les listes non ordonnées.

  2. Les listes ordonnées

    3. Cette vidéo présente les listes ordonnées.

  3. Les listes imbriquées

    4. Cette vidéo présente les listes imbriquées.

  4. Les listes Application

    5. Cette vidéo est un exercice d'application sur les listes en HTML.

Astuce :
Il est possible d'insérer des paragraphes entre les éléments de la liste pour fournir des descriptions supplémentaires ou des informations contextuelles. Cela permet d'améliorer la lisibilité et la compréhension du contenu présenté dans la liste.

Il est conseillé d'indenter d'un niveau supplémentaire les paragraphes par rapport aux éléments de la liste pour une meilleure lisibilité du code HTML. Mais le formateur peut les ramener au même niveau que les éléments de la liste.

Fichier exercice

Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html