Formation 36

Afficher une liste

En HTML, on distingue les listes à puces des listes numérotées.

Listes à puce : balise <ul> (type block)

Une liste à puce est délimitée par les balises <ul> et </ul>. Chaque élément de la liste doit être placé entre les balises <li> et </li>.

<ul>
<li>élément 1</li>
<li>élément 2</li>
<li>élément 3</li>
</ul>

 

Ce qui donne à l'écran :

élément 1
élément 2
élément 3

Liste numérotée : balise <ol> (type block)

Une liste numérotée doit être placée entre les balises <ol> et </ol>. Chaque élément de la liste doit être encadré par <li> et </li>.

<ol>
<li>élément a</li>
<li>élément b</li>
<li>élément c</li>
</ol>

 

A l'écran, on obtient par défaut :

1 - élément a
2 - élément b
3 - élément c

 

Remarquez que le navigateur numérote lui-même les items

<ol> et <ul> sont des balises de type block. Le texte qui suit sera une liste sera donc placé sur une nouvelle ligne.

Cas particulier du glossaire (liste de définitions)

Si vous souhaitez mettre en place un glossaire ou un dictionnaire sur votre site, utilisez la balise <dl> qui signifie “ liste de définitions ”. Chaque élément du dictionnaire sera composé d’un terme à définir (<dt>) et de la définition (<dd>), comme ceci :

<dl>
<dt>élément 1</dt>
<dd>définition de l’élément 1</dd>
<dt>élément 2</dt>
<dd>définition de l’élément 2</dd>
<dt>élément 3</dt>
<dd>définition de l’élément 3</dd>
</dl>

 

A l'écran, l'internaute verra :

élément 1
définition de l’élément 1

élément 2
définition de l’élément 2

élément 3
définition de l’élément 3



Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS