Les listes, s'ils sont peu fréquent dans la plupart des textes que l'on trouve dans la presse, sont néanmoins une forme courante d'écriture sur le web qui exige concision plus que qualités littéraires au vu de la rapidité avec laquelle les internautes passent d'un contenu à l'autre. Dans ce contexte la liste va permettre d'énumérer un certain nombre d'éléments. Les différents types de listes sont :
Dans chaque cas, la liste se définit d'au moins deux éléments :
Liste à puce et liste numérotée partagent toutes deux le même type de code HTML. Les objets de la liste sont énumérés avec l'élément li
répété autant de fois que nécessaire.
La liste à puce se définit avec l'élément ul
pour unordered list. Les listes à puces sont à utiliser lorsque l'ordre des éléments dans la liste n' pas d'importance particulière.
<ul> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ul>
ce qui affiche le résultat suivant :
Remarquez que la puce par défaut est un petit rond noir et que la liste est légèrement en retrait sur la gauche. Ces propriétés peuvent être redéfinies en CSS avec list-style-type
et margin-left
.
Les changements seront peu nombreux par rapport à une liste ul
, seul la balise générale change :
<ol> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ol>
et affiche :
- Germinal
- Du contrat social
- Les misérables
On rappellera au passage que l'utilisation de liste numérotée induira une interprétation particulière de la part du navigateur et des moteurs de recherches qui considéreront les premiers éléments de la liste comme plus importants.
Il est possible de changer le type de numérotation en HTML ou CSS. En HTML elle sera avec l'attribut type
qui peut accepter les valeurs suivantes :
par exemple :
<ol type="lower-alpha"> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ol>
et affiche :
- Germinal
- Du contrat social
- Les misérables
On remarque que la valeur par défaut consiste en l'utilisation de chiffres.
Il est parfois nécessaire de commencer la numérotation à une valeur particulière. Dans ce cas, l'utilisation de l'attribut start
s'avère bien pratique.
<ol start="10"> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ol>
et affiche :
- Germinal
- Du contrat social
- Les misérables
L'attribut Start
de ul
et ol
permettent par exemple d'avoir plusieurs listes continues en termes de numérotation. Il faudra cependant alors bien s'assurer de saisir les chiffres adéquats pour la poursuite de l'incrémentation.
reversed
permettra d'obtenir cette action très simplement.<ol start="10" reversed> <li>Germinal</li> <li>Du contrat social</li> <li>Les misérables</li> </ol>
Il est parfois aussi nécessaire d'imbriquer une liste dans une autre. Cette pratique moins courante pose des problèmes de lisibilité de la page et aussi du code. On préférera créer deux listes différentes hormis dans certaines situations comme par exemple les menus de navigation.
Le principe est simple : chaque nouvelle liste est incluse entièrement dans un li
parent.
<ol> <li>Germinal <ul> <li>Disponible en epub</li> <li>Disponible en PDF</li> </ul> </li> <li>Du contrat social</li> <li>Les misérables</li> </ol>
et affiche :
- Germinal
- Disponible en epub
- Disponible en PDF
- Du contrat social
- Les misérables
L'aspect de la liste de second niveau est alors un peu différent de la liste de premier niveau de manière à éviter toute confusion lors de la lecture.
Les listes de définition ou de glossaire sont utilisées dans le cas particulier où la liste s'effectue sur deux niveaux :
Le cas le plus fréquent d'utilisation de ce genre de liste est représenté par les dictionnaires ou les glossaires. Mais il est utilisable dans tout contexte permettant de donner des détails à un élément listé comme une liste bibliographique ou une liste d'instruction.
En HTML, cela prendra la forme suivante :
<dl> <dt>Germinal</dt> <dd>Livre écrit par Emile Zola</dd> <dt>Du contrat social</dt> <dd>Écrit par Jean-Jacques Rousseau</dd> <dt>Les misérables</dt> <dd>Oeuvre majeure de Victor Hugo</dd> <dd>Certainement la plus représentative et représentée à l'étranger</dd> </dl>
ce qui donnera dans le navigateur :
On notera que le code commence par l'élément dl
qui encadre toute la liste et qu'une suite de dt
et dd
de même niveau est utilisée :
dt
définit le terme qui doit être décritdd
est la description elle-même, devant être placée juste après le dt qu'elle décrit. Elle peut être utilisée plusieurs fois pour un même dt
. Les descriptions sont affichées en retrait par rapport au terme à définir.Certaines de ces listes affichent parfois des informations principales et des informations secondaires sur la ligne dt
. Il est alors possible d'utiliser l'élément dfn
pour pointer spécifiquement celui qui est décrit par la suite :
<dl> <dt><dfn>Germinal</dfn>, 1885</dt> <dd>Livre écrit par Emile Zola</dd> <dt>Du contrat social</dt> <dd>Écrit par Jean-Jacques Rousseau</dd> <dt>Les misérables</dt> <dd>Oeuvre majeure de Victor Hugo</dd> <dd>Certainement la plus représentative et représentée à l'étranger</dd> </dl>
ce qui sera interprété comme :
Indépendamment de l'aspect graphique qui peut être modifié par le CSS, l'utilisation de dfn
permet de mettre en évidence l'élément principal. Si on lui ajoute un attribut id
unique, on pourra alors s'y référer directement par le biais d'un lien et utiliser le système pour des glossaires, notes de bas de page ou de fin de document.
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.