Leçons de niveau 14

Hypertext Markup Language/Listes

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
Listes
Icône de la faculté
Chapitre no 5
Leçon : Hypertext Markup Language
Chap. préc. :Liens hypertextes
Chap. suiv. :Éléments de présentation
fin de la boite de navigation du chapitre
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « Hypertext Markup Language : Listes
Hypertext Markup Language/Listes
 », n'a pu être restituée correctement ci-dessus.

Introduction[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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>