Les balises de liste ul et ol

10:33



Les listes sont utilisées pour regrouper des informations afin qu'elles soient clairement associées les unes aux autres et faciles à lire. Dans le développement web moderne, les listes sont utilisées pour la navigation ainsi que le contenu général.

Les listes sont bonnes d'un point de vue structurel car elles aident à créer un document bien structuré, plus accessible et facile à entretenir. Ils sont également utiles car ils fournissent des éléments spécialisés auxquels vous pouvez joindre des styles CSS. Enfin, les listes sémantiquement correctes aident les visiteurs à lire votre site Web et simplifient la maintenance lorsque vos pages nécessitent des  mises à jour.
Il existe trois types de liste en HTML:

  • Liste non ordonnée – est utilisée pour regrouper un ensemble d'éléments listés dans aucun ordre particulier
  • Liste ordonnée – est utilisée pour regrouper un ensemble d'éléments listés dans un ordre spécifique
  • Liste de description - utilisée pour afficher le pair nom / valeur telles que les termes et définitions
Chaque type de liste a un but spécifique et une signification dans une page Web.

Listes non ordonnées :

Les listes non ordonnées utilisent un ensemble de balises <ul> </ ul> entourant un ou plusieurs ensembles de balises <li> </ li>:


<ul>
  <li>Pain</li>
  <li> Café</li>
  <li>Lait</li>
  <li>Beurre</li>
</ul>

Les listes numérotées sont utilisées pour afficher une liste d'éléments qui doivent être dans un ordre spécifique. Un exemple serait les instructions de cuisson:
  1. Rassembler les ingrédients
  2. Mélanger les ingrédients ensemble
  3. Mettre les ingrédients dans un plat de cuisson
  4. Cuire au four pendant une heure
  5. Retirer du four
  6. Laisser reposer pendant dix minutes
  7. Servir le plat

Si les éléments de la liste étaient placés dans un ordre différent, les informations n'auraient plus de sens:
  1. Rassembler les ingrédients
  2. Cuire au four pendant une heure
  3. Servir le plat
  4. Retirer du four
  5. Mettre les ingrédients dans un plat de cuisson
  6. Laisser reposer pendant dix minutes
  7. Mélanger les ingrédients ensemble

Les listes commandées peuvent être affichées avec plusieurs options de séquence. La valeur par défaut dans la plupart des navigateurs est des nombres décimaux, mais il existe d'autres disponibles:des lettres majuscules (A, B,..), lettres minuscules (a,b,..), des nombres (1,2,3..)(01,02,03..)(i,ii,iii..)…
Comme pour les listes non ordonnées, vous pouvez utiliser CSS pour modifier le style de vos listes ordonnées.

Liste ordonnée <ol></ol>

Les listes ordonnées utilisent un ensemble de balises <ol> </ ol> entourant un ou plusieurs ensembles de balises <li> </ li>:
<ol>
  <li>Rassembler les ingrédients</li>
  <li>Mélanger les ingrédients ensemble</li>
  <li>Mettre les ingrédients dans un plat de cuisson</li>
  <li>Cuir au four pendant une heure</li>
  <li>Retirer du four</li>
  <li>Laisser reposer pendant dix minutes</li>
  <li>servir le plat</li>
</ol>

Début des listes ordonnées avec des numéros autres que 1

Une exigence commune dans l'utilisation de la liste ordonnée est de les amener à commencer par un numéro autre que 1 (ou i, ou I, etc.). Cela se fait en utilisant l'attribut start, qui prend une valeur numérique (même si vous utilisez CSS pour modifier les compteurs de liste pour être alphabétique ou Roman). Cela est utile si vous avez une seule liste d'éléments, mais que vous devez diviser la liste avec une note ou d'autres informations connexes. Par exemple, nous pourrions le faire avec l'exemple précédent:

<!DOCTYPE html>
<html>
<body>

<Ol>
          <Li> Rassembler des ingrédients </li>
          <Li> Mélangez les ingrédients ensemble </li>
 <Li> Placer les ingrédients dans un plat de cuisson </li>
</Ol>

<P> Avant de placer les ingrédients dans le plat de cuisson, préchauffer le four à
180 degrés centigrade / 350 degrés Fahrenheit en préparation pour la prochaine étape. </P>

<Ol start = "4">
               <Li> Cuire au four pendant une heure </li>
               <Li> Retirer du four </li>
               <Li> Laisser reposer pendant dix minutes </li>
               <Li> Serve </li>
</Ol>

</body>
</html>

Cela donne le résultat suivant:

  1. Rassembler des ingrédients
  2. Mélangez les ingrédients ensemble
  3.  Placer les ingrédients dans un plat de cuisson
Avant de placer les ingrédients dans le plat de cuisson, préchauffer le four à 180 degrés centigrade / 350 degrés Fahrenheit en préparation pour la prochaine étape.
  1. Cuire au four pendant une heure
  2. Retirer du four
  3. Laisser reposer pendant dix minutes
  4. Servir le plat
Balise de liste de description

Les listes de descriptions utilisent un ensemble de balises <dl> </ dl> entourant un ou plusieurs groupes de balises <dt> </ dt> (nom) et <dd> </ dd> (valeur). Vous devez associer au moins un <dt> </ dt> avec au moins un <dd> </ dd> et le <dt> </ dt> doit toujours figurer dans l'ordre source.

Une liste de description simple de noms simples avec des valeurs simples ressemblerait à ceci:

<dl>
   <dt> Nom </dt>
   <dd> Valeur </dd>
   <dDt> Nom </dt>
   <dd> Valeur </dd>
   <dt> Nom </dt>
   <dd> Valeur </dd>
</ dl>
Donne le resultat suivant :

Nom
Valeur
Nom
Valeur
Nom
Valeur


Listes imbriquée
Un élément de liste individuel peut contenir une autre liste entière, appelée liste imbriquée. Il est utile pour des choses comme des tables des matières qui contiennent des sous-sections:

<ol>
   <li> Chapitre 1
     <ol style = "list-style-type: lower-alpha;">
       <li> Section 1 </ li>
       <li> Section 2 </ li>
       <li> Section 3 </ li>
     </ ol>
   </li>
   <li> Chapitre 2 </ li>
   <li> Chapitre3 </ li>
</ ol>


Donne le resultat suivant :

·  Chapitre 1
  1. Section 1
  2. Section 2
  3. Section 3
·  Chapitre 2
·  Chapitre3

Notez que nous avons utilisé la propriété CSS list-style-type: lower-alpha pour séquencer la liste imbriquée avec des lettres minuscules au lieu des nombres décimaux.

Les listes imbriquées sont très utiles et forment souvent la base des menus de navigation, car ils constituent un bon moyen de définir la structure hiérarchique du site Web. Ils sont également très souples, car les listes ordonnées ou non ordonnées peuvent être imbriquées à l'intérieur des éléments de liste ordonnée ou non ordonnée. Pour un exemple d'imbrication de listes non ordonnées dans une liste ordonnée, consultez la section «Choix parmi les types de liste» ci-dessus.


En théorie, vous pouvez imbriquer des listes à n'importe quel niveau que vous aimez, bien que dans la pratique, il peut devenir source de confusion à des listes de nid trop profondément. Pour les très grandes listes, il vaut peut-être mieux diviser le contenu en plusieurs listes avec des en-têtes, ou même les diviser en pages séparées. Une bonne règle de base est, ne nichez pas des listes plus profond que trois niveaux.

Leave a Comment

Aucun commentaire

Inscription à : Publier les commentaires ( Atom )
Fourni par Blogger.