Auteur Auteur

Tutoriel HTML5

Travailler avec des listes HTML

Les listes HTML sont utilisées pour présenter une liste d'informations de manière bien formée et sémantique. Il existe trois types de liste différents en HTML et chacun a un but et une signification spécifiques.

  • Liste non ordonnée : Utilisée pour créer une liste d'éléments associés, sans ordre particulier.
  • Liste ordonnée : Utilisée pour créer une liste d'éléments associés, dans un ordre spécifique.
  • Liste de description : Utilisée pour créer une liste de termes et leurs descriptions.

Remarque : Dans un élément de liste, vous pouvez insérer du texte, des images, des liens, des sauts de ligne, etc. Vous pouvez également placer une liste entière dans un élément de liste pour créer une liste imbriquée.

Dans les sections suivantes, nous couvrirons les trois types de liste un par un :

Listes HTML non ordonnées

Une liste non ordonnée est créée à l'aide de la balise <ul>, et chaque élément de la liste commence par la balise <li>.

Les éléments d'une liste non ordonnée sont marqués par des puces. Voici un exemple :

 


   <ul>

  
     <li>Google</li>
  
     <li>Facebook</li>

       <li>Microsoft</li>


   </ul>

La sortie de l'exemple ci-dessus ressemblera à ceci :

  • Google
  • Facebook
  • Microsoft

Vous pouvez également modifier le type de puce dans votre liste non ordonnée à l'aide de la propriété CSS list-style-type. La règle de style suivante change le type de puce par défaut en carré :


   ul {

  
        list-style-type: square;

   }

Veuillez consulter le tutoriel sur les listes CSS pour en savoir plus sur le style des listes HTML.

 

Listes ordonnées HTML

Une liste ordonnée est créée à l'aide de la balise <ol>, et chaque élément de la liste commence par l'élément <li>. Les listes ordonnées sont utilisées lorsque l'ordre des éléments de la liste est important.

Les éléments de liste dans une liste ordonnée sont marqués par des numéros. Voici un exemple :


   <ol>

  
     <li>Demarrer son pc</li>
  
     <li>Ouvrir son navigateur</li>

       <li>Aller sur le site letecode.com pour apprendre</li>


   </ol>

La sortie de l'exemple ci-dessus ressemblera à ceci :

  1. Demarrer son pc
  2. Ouvrir son navigateur

La numérotation des éléments dans une liste ordonnée commence généralement par 1. Toutefois, si vous souhaitez modifier cela, vous pouvez utiliser l'attribut start, comme illustré dans l'exemple suivant :


   <ol start="10">

  
     <li>Cliquer sur une catégorie</li>
  
     <li>Choisir un article</li>

       <li>Partager avec les amis</li>


   </ol>

Comme pour une liste non ordonnée, vous pouvez également utiliser la propriété list-style-type de CSS pour modifier le type de numérotation dans une liste ordonnée. La règle de style suivante change le type de marqueur en chiffres romains.


   ol {


          list-style-type: upper-roman;


   }

Conseil : Vous pouvez également utiliser l'attribut type pour modifier le type de numérotation, par exemple type="I". Cependant, vous devriez éviter cet attribut, utilisez plutôt la propriété CSS list-style-type.

Listes de description HTML

Une liste de description est une liste d'éléments avec une description ou une définition de chaque élément.

La liste de description est créée à l'aide de element <dl>. L'élément <dl> est utilisé conjointement avec l'élément <dt> qui spécifie un terme et l'élément <dd> qui spécifie la définition du terme.

Les navigateurs rendent généralement les listes de définitions en plaçant les termes et les définitions sur des lignes séparées, où les définitions des termes sont légèrement en retrait. Voici un exemple :

 


   <dl>

  
     <dt>Pain</dt>

       <dd>Un aliment cuit au four à base de farine.</dd>
  
     <dt>Café</dt>

       <dd>Boisson à base de grains de café torréfiés.</dd>


   </dl>

La sortie de l'exemple ci-dessus ressemblera à ceci :

 

Pain

         Un aliment cuit au four à base de farine.

Café

        Boisson à base de grains de café torréfiés.

Essayons cette fois d'introduire une liste dans une liste. Est-ce que c'est possible? Oui. Voyons


  
    
      
  •  General Data 
    • 
      
  • 
         
         
      
            
    •  Specific Data 
      • 
            
    •  Specific Data 
      • 
            
    •  Specific Data 
      • 
         
    
      
    • 
      
  •  General Data 
    • 
      
  • 
         
      
            
    1.  Specific Data 
      2. 
            
    2.  Specific Data 
      3. 
            
    3.  Specific Data 
      4. 
         
    
      
    •

Résultat :

  • General Data
    • Specific Data
    • Specific Data
    • Specific Data
  • General Data
    1. Specific Data
    2. Specific Data
    3. Specific Data

Avec un style


  


    Try It Yourself 
   

   
   
    
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
   

   
    
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
   
 
   
    
      
  1.  Some data here. 
    2. 
      
  2.  Some data here. 
    3. 
      
  3.  Some data here. 
    4. 
   

   
    
      
  1.  Some data here. 
    2. 
      
  2.  Some data here. 
    3. 
      
  3.  Some data here. 
    4. 
   

   
   
    
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
   

   
   
    
      
  1.  Some data here. 
    2. 
      
  2.  Some data here. 
    3. 
      
  3.  Some data here. 
    4.

Veuillez tester le Résultat chez vous

Encore un peu de style


    



    Try It Yourself 
   

   
   
    
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    • 
      
  •  Some data here. 
    •

 

Précédent
Suivant