Listes en HTML

Les listes ordonnées ou non-ordonnées sont des éléments structuraux essentiels pour présentation du contenu d’un page HTML.

Les listes sont des éléments essentiels dans la structure des pages HTML en particulier les listes non-ordonnées qui sont utilisées à des endroits qui peuvent parfois surprendre les débutants. Par exemple, la plupart du temps, les menus de navigation sont construits avec des listes. Les listes permettent de gérer la hiérarchie des éléments, l’affichage est ensuite complétement retravaillé en CSS.

Les listes non-ordonnées versus ordonnées

Les listes non-ordonnées, comme leur nom l’indique, n’ont pas de notion d’ordre. Elles se présentent par défaut sous la forme d’une liste à puces comme vous pouvez en trouver dans les logiciels de traitement de texte.

Les listes ordonnées quant à elles concernent des éléments qui doivent être lus dans un ordre donné, ces éléments seront alors numérotés. Ce type de liste est généralement utilisé pour lister des étapes à suivre.

Avant de vous lancer dans la création d’une liste, il faudra faire un choix sur son type, qui dépendra de l’importance de l’ordre des éléments. Par exemple, pour une recette de cuisine, vous utiliserez une liste non-ordonnée pour les ingrédients et une liste ordonnée pour les étapes de préparation.

La balise HTML correspondant aux listes non-ordonnées (« unordered list » en anglais) est <ul></ul>. Pour les listes ordonnées (« ordered list » en anglais), il faudra utiliser <ol></ol>.

Construire des listes

La liste est ouverte via <ul> ou <ol> puis chacun des éléments de la liste sera placé à l’intérieur d’un élément (« list item » en anglais) <li></li>.

<h1>Fondant au chocolat</h1>
 
<h2>Ingrédients</h2>
<ul>
    <li>2 œufs</li>
    <li>1/2 sachet de levure chimique</li>
    <li>200g de chocolat noir pâtissier</li>
    <li>100g de farine</li>
    <li>100g de beurre</li>
    <li>100g de sucre</li>
</ul>
 
<h2>Préparation</h2>
<ol>
    <li>Dans un saladier, ajoutez le chocolat et le beurre. Faites fondre.</li>
    <li>Dans un saladier, ajoutez le reste des ingrédients et mélangez.</li>
    <li>Mélangez le chocolat fondu et incorporez le à la pâte.</li>
    <li>Enfournez dans un four préchauffé à 180°C pendant 10 minutes.</li>
</ol>
Recette de cuisine constituée de listes

Résultat dans un navigateur :

Personnaliser les listes

Il faudra se pencher sur le langage CSS pour personnaliser en profondeur les listes. Néanmoins HTML propose certaines options permettant d’agir sur les listes ordonnées.

Pour choisir le type de numérotation, vous pouvez utiliser l’attribut type. La valeur de l’attribut déterminera le type de numérotation :

  • a : lettres minuscules
  • A : lettres majuscules
  • i : chiffres romains minuscules
  • I : chiffres romains majuscules
  • 1 : chiffres arabes
<ol type="A">
	<li>Ligne</li>
	<li>Ligne</li>
</ol>
Choisir le type de numérotation

Il est possible de changer le numéro de départ de la liste avec l’attribut start.

<ol start="5">
	<li>Ligne</li>
	<li>Ligne</li>
</ol>
Décaler le numéro de départ

Pour inverser l’ordre de numérotation, utilisez l’attribut reversed.

<ol reversed="reversed">
	<li>Ligne</li>
	<li>Ligne</li>
</ol>
Inversion de la numérotation

Tous ces paramètres sont évidemment combinables :

<ol start="5" type="A">
	<li>Ligne</li>
	<li>Ligne</li>
	<li>Ligne</li>
	<li>Ligne</li>
</ol>
Combinaison des propriétés de liste

Résultat dans un navigateur :

Les listes imbriquées

Pour avoir plusieurs niveaux hiérarchiques dans une liste, il est nécessaire d’utiliser des listes imbriquées. Il suffit pour cela d’insérer une liste à l’intérieur d’un élément <li></li>.

<ul>
	<li>Ligne niveau 1</li>
	<li>Ligne niveau 1
		<ol>
			<li>Ligne niveau 2</li>
			<li>Ligne niveau 2</li>
			<li>Ligne niveau 2</li>
		</ol>
	</li>
	<li>Ligne niveau 1</li>
</ul>
Listes imbriquées

Cela peut vous intéresser :

1 réaction sur “ Listes en HTML ”

  1. Ping Présentation du langage HTML (Cours) - Web Formation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.