Guillaume Duverger - Développement & Graphisme

Les listes HTML

Les listes sont également un élément essentiel dans la structure d'un document HTML. Elles vont permettre d'ordonner du contenu. C'est pourquoi on parle de liste ordonnée, non ordonnée ou encore de description.

Les listes non-ordonnées :

On nomme liste non-ordonnée une série de mots sans lien ni ordre. Un menu par exemple est une liste non-ordonnée. On peut très bien changer l'ordre des rubriques sans altérer le sens du menu.

On utilisera l'élément ul qui est l'élément parent, suivi de l'élément li. On pourra également imbriquer plusieurs listes comme ceci :

• viande
• boissons
  • soda
  • vin
  • eau
• pain

<ul>
<li>viande</li>
<li>boissons
<ul>
<li>soda</li>
<li>vin</li>
<li>eau</li>
</ul>
</li>
<li>pain</li>
</ul>

On voit apparaître des puces (d'où le nom liste à puces). Celles-ci sont personnalisables avec la propriété CSS list-style-type (ou sa propriété raccourcie list-style) dont les valeurs les plus utilisées sont disc, circle, square ou encore none (pour n'afficher aucune puce). Il existe beaucoup d'autres valeurs mais il est peu probable que vous ayez à vous en servir.

Par ailleurs, vous pouvez personnaliser les puces avec une image, via la propriété list-style-image.

Les listes ordonnées :

Vous l'aurez sans doute compris, une liste ordonnée respecte l'ordre, dans le cas d'un sommaire par exemple. On utilise alors l'élément ol. Ce ne sont plus des puces qui apparaissent mais des chiffres, des lettres, des nombres... Tout comme une liste non-ordonnée, on peut imbriquer une liste ordonnée :

1. Introduction
2. Contenu principal
   1. Partie I
   2. Partie II
   3. Partie III
3. Conclusion

<ol>
<li>Introduction</li>	
<li>Contenu principal
<ol>
<li>Partie I</li>
<li>Partie II</li>
<li>Partie III</li>
</ol>
</li>
<li>Conclusion</li>
</ol>

NB : le quatrième niveau de HTML a déprécié les attributs type et compact à l'élément ol. Deux attributs sont actuellement disponibles en HTML5, à savoir start et reversed.

Les listes de description :

Une liste de description va permettre de lister ainsi que donner une description à des termes. Pour ce faire, nous utilisons l'élément dl, élément parent de l'élément dt et de l'élément dd pour la description

HTML :

Langage permettant d'afficher du contenu sur un document web.

CSS :

Langage permettant de mettre en forme des éléments dans un document web.

JavaScript :

langage de programmation permettant l'intéraction d'éléments dans un document web.

<dl>
<dt><code class=code>HTML</code> :</dt>
<dd>Langage permettant d'afficher du contenu sur un document web.</dd>
<dt><code class=code>CSS</code> :</dt>
<dd>Langage permettant de mettre en forme des éléments dans un document web.</dd>
<dt><code class=code>JavaScript</code> :</dt>
<dd>langage de programmation permettant l'intéraction d'éléments dans un document web.</dd>
</dl>