Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Listes | Fondamentaux de HTML
Essentiels HTML

book
Listes

Les listes sont utilisées pour organiser et présenter des informations dans un format structuré. Il existe deux principaux types de listes : listes non ordonnées (<ul>) et listes ordonnées (<ol>).

Listes non ordonnées

Les listes non ordonnées présentent les éléments sous forme de puces. Chaque élément de la liste est défini à l'aide de la balise <li> (élément de liste). Les listes non ordonnées sont généralement utilisées lorsque l'ordre des éléments n'est pas significatif.
Exemple:

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
<meta charset="UTF-8" />
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

Dans l'exemple ci-dessus :

La liste non ordonnée (<ul>) affiche les éléments avec des puces.

Listes ordonnées

Les listes ordonnées affichent les éléments dans une séquence numérotée. Chaque élément de la liste est défini à l'aide de la balise <li> (élément de liste). Les listes ordonnées sont utilisées lorsque l'ordre des éléments est important et doit être souligné.
Exemple :

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
<meta charset="UTF-8" />
</head>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>

Dans l'exemple ci-dessus :

La liste est ordonnée (<ol>), affichant les éléments avec des numéros.

Listes imbriquées

Les listes peuvent également être imbriquées les unes dans les autres pour créer des structures hiérarchiques. Cela signifie qu'un élément de liste (<li>) dans une liste (<ul> ou <ol>) peut lui-même contenir une autre liste. Cela est utile pour organiser des informations complexes en plusieurs niveaux de hiérarchie.
Exemple :

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
<meta charset="UTF-8" />
</head>
<body>
<ul>
<li>Main item 1</li>
<li>
Main item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Main item 3</li>
</ul>
</body>
</html>

Dans l'exemple ci-dessus :

  • Le deuxième élément de la liste ("Main item 2") contient une liste non ordonnée imbriquée (<ul>), créant une structure hiérarchique ;

  • Chaque liste imbriquée (<ul>) est indentée pour indiquer visuellement son niveau hiérarchique.

Tutoriel Vidéo

1. Quelle balise est utilisée pour créer des listes non ordonnées ?

2. Quand utiliseriez-vous une liste ordonnée au lieu d'une liste non ordonnée ?

3. Quelle balise manque dans les blancs (___) ?

question mark

Quelle balise est utilisée pour créer des listes non ordonnées ?

Select the correct answer

question mark

Quand utiliseriez-vous une liste ordonnée au lieu d'une liste non ordonnée ?

Select the correct answer

question mark

Quelle balise manque dans les blancs (___) ?

<h1>List of products:</h1>
<ul>
<___>🍞 Bread</___>
<___>🍇 Grapes</___>
<___>🧀 Cheese</___>
</ul>

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 7

Demandez à l'IA

expand
ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

some-alt