HTML - Listes

HTML à trois types de listes. <ol> montre une liste ordonnée alors que <ul> une désordonnée, et pour créer une liste de définition on utilise <dl>. Utilisez les attributs type et start pour créer une liste en fonction de vos besoins.

• <ul> - liste désordonnées, points
• <ol> - liste ordonnée, nombres
• <dl> - liste de définition.

HTML - La liste ordonnée

Utilisez la balise <ol> pour commencer une liste ordonnée. Et mettez <li></li> (élément de liste) au milieu.

html<h4>Objectifs</h4>

<ol>
	<li>Trouver un travail</li>
	<li>Prendre beaucoup d'argent </li>
	<li>Déménager dans une autre ville</li>
</ol>

Demo

Vous pouvez commencer votre liste avec le numéro que vous souhaitez, spécifiez le simplement avec l'aide de l'attribut start.

html<h4>Objectif</h4>

<ol start="4" >
	<li>Trouver un travail</li>
	<li>Prendre beaucoup d'argent </li>
	<li>Déménager dans une autre ville</li>
</ol>

Demo

Cet élément ne fait rien d'exceptionnel mais il peut être très utile parfois.

HTML - D'autres types de listes ordonnées

En excluant l'exemple ci-dessus il y a 4 autres types de listes ordonnées. A la place de la numérotation normale vous pouvez utiliser des chiffres romains ou bien des lettres mais dans les deux cas vous pouvez utiliser uniquement des lettres minuscules ou majuscules. Utilisez l'attribut type si vous souhaitez modifier le type de numérotation

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

En fonction du cas, ces listes peuvent ressembler à ceci

Liste désordonnée

Vous pouvez créer une liste désordonnée avec l'aide de la balise <ul>. Les listes désordonnées sont de trois types : carrés, points, et cercles. La valeur standard donnée par la majorité des navigateurs est le point.

html<h4>Liste de courses </h4>

<ul>
	<li>lait</li>
	<li>fromage</li>
	<li>oeufs</li>
	<li>sucre</li>
</ul>

Demo

Vous pouvez voir dans l'exemple suivant à quoi ressemble toutes les sortes de listes désordonnées.

html<ul type="square">
<ul type="disc">
<ul type="circle">

HTML - La liste de définition

De même vous pouvez créer des listes de définition avec la balise <dl>;. Cette liste donnera le mot ci-dessus, la définition. C'est indiqué pour mettre le mot en gras et le mettre en évidence.

html<dl>
	<dt>Queso</dt>
	<dd>Mot espagnol pour fromage.</dd>
	
	<dt>Ordenador</dt>
	<dd>Mot espagnol pour ordinateur</dd>
</dt>

Demo