Accueil    HTML    Balise UL
 



balise ul  Balise UL : unordered list

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <ul> est utilisée pour définir une liste non ordonnée, c'est à dire une liste d'éléments non numérotés précédés de façon classique par une puce. Le rendu des listes varie suivant les navigateurs : il est utile d'appliquer des styles css pour contrôler au mieux l'affichage des listes.
Pour afficher plusieurs éléments sous un élément d'une liste, il suffit de créer une nouvelle liste imbriquée dans la première au niveau de l'élément voulu.

Chaque élément de la liste doit être déclaré à la suite de la balise <li>. Il est possible de modifier l'apparence de la puce devant chaque élément en utilisant le style css list-style-type. Ce style prend comme valeurs possibles :



  • none : pas de puce
  • inherit : hérite de la valeur si elle existe de l'élément parent
  • circle : puce en forme de cercle vide
  • disc : puce en forme de disque plein
  • square : puce en forme de carré
  • decimal : numérotation
  • decimal-leading-zero : numérotation avec un 0 précédant les valeurs (01, 02 ...)
  • lower-alpha et lower-latin : valeurs alphanumériques en minuscules : a, b, c ...
  • upper-alpha et upper-latin : valeurs alphanumériques en majuscules : A, B, C ...
  • lower-greek : valeurs en grec : alpha, beta ...
  • lower-roman : valeurs numériques latines minuscules : i, ii, iii ...
  • upper-roman : valeurs numériques latines majuscules : I, II, III ...
  • armenian
  • georgian
  • hiragana
  • katakana

D'autres styles sont applicables comme par exemple list-style-image qui remplace la puce par l'image spécifiée et le style list-style-position qui spécifie si la puce est positionnée au niveau de l'élément ou bien en retrait (marge négative).




Propriétés pour la balise ul :




Propriétés Définition Valeurs
compact Applique un rendu plus compact de la liste avec un texte plus petit et resserré.
Déprécié, il faut employer les styles CSS pour un rendu équivalent
compact
type Spécifie l'apparence des puces des éléments lt;li> qu'elle contient.
Déprécié, il faut utiliser le style CSS "list-style-type"
circle
disc
square


Exemple d'utilisation de la balise ul :





Listes imbriquées avec affichage des puces décimales et alphabétiques et référence à des images :


<ul style="list-style-type:decimal;">
   <li>catégorie 1</li>
   <li>catégorie 2</li>
   <li>catégorie 3
      <ul style="list-style-type:lower-alpha;">
         <li>Sous catégorie 3.1</li>
         <li>Sous catégorie 3.2</li>
         <li>Sous catégorie 3.3</li>
      </ul>
   </li>
   <li>catégorie 4</li>
   <li>catégorie 5</li>
</ul>



<ul>
   <li style="list-style-image:url(../images/ICO_Plus.gif);">catégorie 1</li>
   <li style="list-style-image:url(../images/ICO_Moins.gif);">catégorie 2
      <ul style="list-style-type:hiragana;">
         <li>Sous catégorie 2.1</li>
         <li>Sous catégorie 2.1</li>
      </ul>
   </li>
   <li style="list-style-image:url(../images/ICO_Plus.gif);">catégorie 3</li>
</ul>


Liste en mode menu :
(on utilise ici le style CSS display, il est également possible d'utiliser la propriété float)

<ul style="display:inline; border:solid 1px black; list-style-type:none; margin:0px;
          background-color:lightgrey; padding:5px; color:midnightblue;">
   <li style="display:inline; padding-right:10px;">Elément 1</li>
   <li style="display:inline; padding-right:10px;">Elément 2</li>
   <li style="display:inline; padding-right:10px;">Elément 3</li>
   <li style="display:inline;">Elément 4</li>
</ul>



  • catégorie 1
  • catégorie 2
  • catégorie 3
    • Sous catégorie 3.1
    • Sous catégorie 3.2
    • Sous catégorie 3.3
  • catégorie 4
  • catégorie 5


Liste avec référence à des images pour remplacer les puces classiques :

  • catégorie 1
  • catégorie 2
    • Sous catégorie 2.1
    • Sous catégorie 2.1
  • catégorie 3



Liste en mode menu :

  • Elément 1
  • Elément 2
  • Elément 3
  • Elément 4