Listes

Vous êtes adepte de PowerPoint Libre Office ? Vous avez donc l'habitude des bulletpoints. Nous allons voir ici comment les gérer en HTML.

Les listes ordonnées ou order-list

La première liste est la liste ordonnée. Il s'agit d'une liste dont l'ordre des éléments importe, comme par exemple durant la préparation d'une recette de cuisine.

Cette liste commence par la balise <ol> :

				
					<ol>
					</ol>
				
			

Ensuite, chaque élément doit être compris dans une balise <li> :

				
					<ol>
						<li>
							Faire bouillir de l'eau.
						</li>
						<li>
							Plonger l'oeuf dans l'eau en ébulition avec la cuillère.
						</li>
						<li>
							Attendre 3 minutes.
						</li>
						<li>
							Retirer l'oeuf.
						</li>
					</ol>
				
			

Voilà le résultat (notez les numéros 1, 2, 3 … qui se placent avant chaque éléments de la liste) :

1. Faire bouillir de l'eau.
2. Plonger l'oeuf dans l'eau en ébulition avec la cuillère.
3. Attendre 3 minutes.
4. Retirer l'oeuf.

Les listes non-ordonnées ou unorder-list

Nous allons maintenant passer aux listes non-ordonnées. Contrairement à la précédente, celle-ci liste des éléments dont l'ordre n'importe pas, comme par exemple les ingrédients d'une recette de cuisine.

Cette liste commence par la balise <ul> :

				
					<ul>
					</ul>
				
			

Ensuite, chaque élément doit être compris dans une balise <li> :

				
					<ul>
						<li>
							un oeuf,
						</li>
						<li>
							une casserolle,
						</li>
						<li>
							de l'eau,
						</li>
						<li>
							une cuillère.
						</li>
					</ul>
				
			

Voilà le résultat :

• un oeuf,
• une casserolle,
• de l'eau,
• une cuillère.

Exemple concret

Pour illustrer les listes, voilà un exemple concret avec une recette de cuisine :

				
					<!-- Titre de ma page -->
					<h1>
						Recette de l'oeuf à la coque
					</h1>
					<!-- Paragraphe explicatif -->
					<p>
						Voilà la recette de l'oeuf à la coque.
					</p>
					<!-- Sous-titre des ingrédients -->
					<h2>
						Ingrédients :
					</h2>
					<!-- Liste des ingrédients -->
					<ul>
						<li>
							un oeuf,
						</li>
						<li>
							une casserolle,
						</li>
						<li>
							de l'eau,
						</li>
						<li>
							une cuillère.
						</li>
					</ul>
					<!-- Sous-titre de la préparation -->
					<h2>
						Préparation
					</h2>
					<!-- Liste de la préparation -->
					<ol>
						<li>
							Faire bouillir de l'eau.
						</li>
						<li>
							Plonger l'oeuf dans l'eau en ébulition avec la cuillère.
						</li>
						<li>
							Attendre 3 minutes.
						</li>
						<li>
							Retirer l'oeuf.
						</li>
					</ol>