Accueil    HTML    Balise OL
 



balise ol  Balise OL : Ordered list

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


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



La balise <ol> définit une liste ordonnée, c'est à dire une liste tenant compte de l'ordre des éléments qu'elle contient. Par défaut, chacun de ses éléments est précédé de son numéro d'apparition (elle applique implicitement l'attribut "type=1").
Pour modifier cet affichage, il suffit d'employer le style CSS list-style-type et choisir une autre valeur. D'autre part, la balise <ol> effectue un retour à la ligne implicite avant et après son contenu ainsi qu'une indentation.

Comme pour les listes non ordonnées <ul>, il est possible d'imbriquer plusieurs listes entre elles pour obtenir un affichage hiérarchique. 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 au sein des blaises <li>.

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 ol :




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
start Indique quel nombre précèdera le premier élément de la liste.
Déprécié, cependant il n'y a pas d'équivalence CSS disponible.
Valeur
type Spécifie l'apparence des chiffres des éléments lt;li> qu'elle contient.
Déprécié, il faut utiliser le style CSS "list-style-type".
1
a
A
i
I


Exemple d'utilisation de la balise ol :





Liste ordonnée standard :

<ol>
   <li>Elément 1</li>
   <li>Elément 2</li>
   <li>Elément 3</li>
   <li>Elément 4</li>
</ol>


Liste ordonnée aec CSS et imbrication :

<ol style="list-style-type:upper-alpha;">
   <li>Rubrique 1
      <ol style="list-style-type:decimal;">
         <li>Sous rubrique 1</li>
         <li>Sous rubrique 2</li>
      </ol>
   </li>
   <li>Rubrique 2</li>
   <li>Rubrique 3
      <ol style="list-style-type:decimal;">
         <li>Sous rubrique 1</li>
         <li>Sous rubrique 2
            <ol style="list-style-type:square;">
               <li>Paragraphe 1</li>
               <li>Paragraphe 2</li>
            </ol>
         </li>
      </ol>
   </li>
</ol>


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

<ol 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>
</ol>



Liste ordonnée standard :
  1. Elément 1
  2. Elément 2
  3. Elément 3
  4. Elément 4

Liste ordonnée avec CSS et imbrication :
  1. Rubrique 1
    1. Sous rubrique 1
    2. Sous rubrique 2
  2. Rubrique 2
  3. Rubrique 3
    1. Sous rubrique 1
    2. Sous rubrique 2
      1. Paragraphe 1
      2. Paragraphe 2


Liste ordonnée en mode menu :

  1. Elément 1
  2. Elément 2
  3. Elément 3
  4. Elément 4