Hypertext Markup Language/Listes

Début de la boite de navigation du chapitre

fin de la boite de navigation du chapitre

Introduction

Les listes peuvent être très utiles pour tout ce qui est énumération, sommaire, menu… En HTML, il existe trois types de listes :

• Les listes non ordonnées
• Les listes ordonnées
• Les listes de définitions

Les listes non ordonnées

Les listes non ordonnées ou listes à puces sont délimitées par les balises <ul> et </ul>, (ul signifiant unordered list). Chaque élément de la liste est délimité par les balises <li> et </li> (li signifiant LIste entry).

La syntaxe est donc :

 <ul>
  <li> entrée 1 </li>
  <li> entrée 2 </li>
  <li> entrée 3 </li>
  <li> entrée 4 </li>
  <li> entrée 5 </li>
  <li> entrée 6 </li>
 </ul>

Il est à noter que la puce a la même couleur que le texte qui la suit.

Les listes non ordonnées disposent de l'attribut type qui permet de choisir la forme de la puce. Les valeurs possibles sont disc qui affiche un cercle plein comme puce, circle qui affiche un cercle vide comme puce et square qui affiche un carré.

Les listes ordonnées

Les listes ordonnées ou listes numérotées sont délimitées par les balises <ol> et </ol> (ol signifiant ordered list). Chaque élément de la liste est délimité par les balises <li> et </li> comme pour les listes non ordonnées.

La syntaxe est donc :

<ol>
  <li> entrée 1 </li>
  <li> entrée 2 </li>
  <li> entrée 3 </li>
  <li> entrée 4 </li>
  <li> entrée 5 </li>
  <li> entrée 6 </li>
</ol>

Il est à noter que la puce a la même couleur que le texte qui la suit.

Les listes ordonnées disposent de l'attribut type qui permet de choisir le type de numérotation. Les valeurs possibles sont A (le système de numérotation sera les lettres majuscules), a (le système de numérotation sera les lettres minuscules), I (le système de numérotation sera les chiffres romains majuscules), i (le système de numérotation sera les chiffres romains minuscules) et 1 (le système de numérotation sera les chiffres arabes).

Elles disposent également de l'attribut start qui prend pour valeur le numéro (en chiffres arabes) à partir duquel le navigateur doit compter. Par exemple, si l’on entre <ol type="a" start="4">, la numérotation débutera à d.

Les listes de définitions

Les listes de définitions ou listes de glossaire sont délimitées par les balises <dl> et </dl> (dl signifiant definition list). Chaque élément de la liste est délimité par les balises <dt> et </dt> (dt signifiant definition term) et sa définition est délimitée par les balises <dd> et </dd> (dd signifiant definition description). La syntaxe est donc :

<dl>
  <dt>Tomate</dt>
  <dd>Plante annuelle de la famille des solanacées, originaire d’Amérique du Sud et Centrale</dd>
  <dt>Poire</dt>
  <dd>Fruit à pépin, de saveur agréable, ordinairement de forme oblongue, et qui va en diminuant vers la queue</dd>
  <dt> … </dt>
  <dd> … </dd>
</dl>