Le Tutoriel de HTML Lists
View more Tutorials:
En HTML afin de créer une liste (List) vous pouvez utiliser la paire de l'étiquette <ul>, <li> ou celle de <ol>, <li> :

<h3>Unordered List (UL + LI)</h3> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> <h3>Ordered List (OL + LI)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
- <UL> est l'abréviation de Unordered List, qui vous permet de créer une liste non ordonnée.
- <OL> est l'abréviation de Ordered List, qui vous permet de créer une liste ordonnée.
- <LI> est l'abréviation de List Item. Un élément (item) de la liste.
Les listes peuvent être imbriquées ensemble :
nested-example.html
<h3>Nested Unordered List</h3> <ul> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ul> <h3>Nested Ordered List</h3> <ol> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ol> <h3>Nested List (3)</h3> <ol> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ol> <h3>Nested List (4)</h3> <ul> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ul>
Contrairement à l'étiquette <UL>, l'étiquette <OL> possède plusieurs attributs (attribute) importants dont :
- type
- start
- reversed
type
L'attribut type spécifie le type de numérotation (numbering type), qui peut prendre l'une des valeurs suivantes :
Type | Description |
"1" | Utilise les chiffres (1,2, ..) pour numéroter la liste. (Par défaut) |
"a" | Utilise des minuscules (lowercase) pour numéroter la liste. |
"A" | Utilise des majuscules (uppercase) pour numéroter la liste. |
"i" | Utilise des chiffres romains (Roman numerals) minuscules (lowercase) pour numéroter la liste. |
"I" | Utilise des chiffres romains (Roman numerals) majuscule (uppercase) pour numéroter la liste. |
<h3>OL type="1" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="i"</h3> <ol type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="I"</h3> <ol type="I"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="a"</h3> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="A"</h3> <ol type="A"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
reversed
L'attribut reversed a la valeur true/false. Si la valeur est true, la liste sera numérotée dans l'ordre inverse.
ol-reversed-example.html
<h3>OL reversed = "false" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL reversed = "true"</h3> <ol reversed="true"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
start
L'attribut start spécifie la valeur de départ pour numéroter la liste.
ol-start-example.html
<h3>OL start ="3" type="1"</h3> <ol start="3"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="i"</h3> <ol start="3" type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="a"</h3> <ol start="3" type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>