Les listes HTML
Le langage de balisage hypertexte prend en charge trois types de listes, chacune avec ses propres balises.
Liste non ordonée
La liste non ordonée contient des listes non numérotées d'éléments sans séquence spécifique. Pour créer une liste non ordonée, on utilise l'élément de bloc <ul>.
Chaque élément de la liste commence par le tag d’ouverture <li> et termine par le tag de fermeture </li>. Le marqueur par défaut pour tous les points est un petit cercle noir.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste non ordonée</h1>
<ul>
<li>Le premier point de la liste</li>
<li>Un autre point de la liste</li>
<li>Encore un point de la liste</li>
</ul>
</body>
</html>Résultat
Les éléments des listes non ordonnées sont marqués avec des puces (petits cercles noirs) par défaut. Toutefois, vous pouvez modifier le style de puce par défaut pour les éléments de la liste à l'aide de l'attribut type .
Vous pouvez utiliser l'attribut type pour changer le style de puce par défaut pour les éléments de la liste.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<ul type="circle">
<li>Élément de liste </li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>
<ul type="square">
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>
</body>
</html>Résultat
Vous pouvez également utiliser la propriété CSS list-style-type ou list-style-image pour définir le type de l'élément de la liste.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Exemples des listes non ordonées:</h2>
<ul style="list-style-type: square;">
<li>Boissons gazeuses</li>
<li>Boissons chaudes</li>
<li>Glaciers</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Thé glacé</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Résultat
La liste numérotée
La liste numérotée contient des éléments dans une certaine séquence. La liste est située dans l’élément de bloc <ol>.
Chaque élément de la liste numérotée commence par le tag d’ouverture <li> et termine par le tag de fermeture </li>. Les points de la liste sont numérotés automatiquement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste numérotée</h1>
<ol>
<li>Premier point du liste numérotée</li>
<li>Deuxième point du liste numérotée</li>
<li>Troisième point du liste numérotée</li>
</ol>
</body>
</html>Résultat
Si vous voulez créer une liste numérotée avec des chiffres romains ou une liste où la séquence est indiquée par des lettres, ajoutez simplement à l'élément <ol> type = "I" ("i") ou type = "A" ("a") respectivement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h3>Liste numéroté:</h3>
<ol>
<li>Pêche
...
</li>
<li>Abricot</li>
<li>Banane</li>
<li>Fraise</li>
</ol>
<h3>Liste avec numérotation alphabétique</h3>
<ol type="A">
<li>Pêche</li>
<li>Abricot</li>
<li>Banane</li>
<li>Fraise</li>
</ol>
<h3>Liste avec des lettres minuscules</h3>
<ol type="a">
<li>Pêche</li>
<li>Abricot</li>
<li>Banane</li>
<li>Fraise</li>
</ol>
<h3>Liste numéroté avec des chiffres romains:</h3>
<ol type="I">
<li>Pêche</li>
<li>Abricot</li>
<li>Banane</li>
<li>Fraise</li>
</ol>
<h3>Liste numéroté avec des chiffres minuscules romains</h3>
<ol type="i">
<li>Pêche</li>
<li>Abricot</li>
<li>Banane</li>
<li>Fraise</li>
</ol>
</body>
</html>Résultat
La liste des définitions (descriptions)
Dans la liste des définitions on indique des termes/noms et ses définitions. Ces listes sont utilisées pour créer des dictionnaires, des ouvrages de référence, etc.
Pour créer une liste des définitions, on utilise l’élément apparié <dl>, dans lequel des termes/noms sont écrits dans le tag <dt>, et ses définitions dans le tag <dd>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Liste des définitions:</h1>
<dl>
<dt>Thé</dt>
<dd>- boisson chaude</dd>
<dt>Jus</dt>
<dd>- boisson gazeuse</dd>
</dl>
</body>
</html>Résultat
Pratiquez vos connaissances
