Listes en HTML

1.1 Types de listes

Les listes en HTML sont un outil important pour organiser et structurer l'information. Elles permettent d'afficher des éléments avec des numéros ou avec des puces. Examinons en détail chaque élément des listes en HTML : <ul>, <ol>, et <li>.

Listes non numérotées (<ul>)

Le tag <ul> est utilisé pour créer des listes non numérotées (marquées). Les éléments de la liste sont affichés avec des puces (points, cercles, carrés).

Exemple :

    
      <ul>
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
        <li>Troisième élément de la liste</li>
      </ul>
    
  

Listes numérotées (<ol>)

Le tag <ol> est utilisé pour créer des listes numérotées. Les éléments de la liste sont affichés avec des chiffres ou des lettres.

Exemple :

    
      <ol>
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
        <li>Troisième élément de la liste</li>
      </ol>
    
  

1.2 Éléments de la liste <li>

Le tag <li> est utilisé pour désigner chaque élément dans une liste, qu'elle soit non numérotée ou numérotée. Il doit toujours être imbriqué dans <ul> ou <ol>.

Comment mémoriser facilement ces tags :

• Ordered List – liste ordonnée (numérotée)
• Unordered List – liste non ordonnée (non numérotée)
• List Item – élément de la liste

Attribut type

Cet attribut peut être utilisé dans <ul> et <ol> pour changer le type de puces ou de numérotation. Par exemple, pour <ol>, vous pouvez utiliser les valeurs "1", "A", "a", "I", "i", et pour <ul> - "disc", "circle", "square".

Exemple de changement de type de puce pour <ul> :

    
      <ul type="square">
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
      </ul>
    
  

Exemple de changement de type de numérotation pour <ol> :

    
      <ol type="A">
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
      </ol>
    
  

Attribut start:

Cet attribut est utilisé uniquement avec <ol> pour spécifier le numéro de départ de la numérotation.

Par exemple :

    
      <ol start="5">
        <li>Cinquième élément de la liste</li>
        <li>Sixième élément de la liste</li>
      </ol>
    
  

Listes imbriquées

Les listes peuvent être imbriquées, ce qui permet de créer des structures plus complexes.

Exemple de liste imbriquée :

    
      <ul>
        <li>Premier élément de la liste</li>
          <ul type="circle">
            <li>Premier élément imbriqué</li>
            <li>Deuxième élément imbriqué</li>
          </ul>
        <li>Deuxième élément de la liste</li>
        <li>Troisième élément de la liste</li>
      </ul>
    
  

1.3 Stylisation des listes

Les listes peuvent être stylisées avec CSS en modifiant la couleur des puces, les types de puces et les marges.

Exemple de stylisation :

    
      ul.custom-list {
        list-style-type: katakana; /* Syllabaire japonais */
        color: blue; /* Couleur du texte */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Système de classement japonais */
        color: green; /* Couleur du texte */
      }
    
  

    
      <ul class="custom-list">
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
      </ul>

      <ol class="custom-list">
        <li>Premier élément de la liste</li>
        <li>Deuxième élément de la liste</li>
      </ol>
    
  

Ainsi, l'utilisation de <ul>, <ol>, et <li> aide à structurer le contenu et améliore sa lisibilité sur les pages web.