• Introduction
• Introduction au HTML5
• Présentation
• Prise en main
• Utiliser des balises
• Utiliser des attributs
• Structurer un document avec HTML5
• Le doctype : définir l'utilisation du HTML
• L'en-tête
• Structure de l'information
• Organiser le contenu
• Ecrire du texte
• Des caractères spéciaux
• Listes
• Tableaux
• Naviguer grâce aux liens
• Le multimédia
• Images
• Video
• Audio
• Sous-titrage HTML
• Fallbacks
• Interface avec l'utilisateur
• Les formulaires
• Les balises d'interface
• Annexes
• Différences en xHTML et HTML5
• Glossaire
• test

Listes

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 :

• liste à puce ;
  
• liste numérotée ;
  
• liste de définition.

Dans chaque cas, la liste se définit d'au moins deux éléments :

• celui qui définit le type de liste et l'encadre ;
  
• ceux qui définissent chaque objet énuméré.
  

Liste à puce et liste numérotée

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 ul

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 :

Germinal
Du contrat social
Les misérables

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.

La liste numérotée ol

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 :

• decimal : 1,2,3 ;
  
• lower-alpha : a, b, b ;
  
• upper-alpha : A, B, C ;
  
• lower-roman : i, ii, iii (à la romaine) ;
  
• upper-roman : I, II, III (à la romaine).

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.

Spécifier la valeur initiale de la numérotation avec start

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.

Spécifier l'ordre d'affichage

Lorsqu'il est nécessaire d'afficher la liste dans l'ordre inverse, l'utilisation de l'attribut 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>

Les listes imbriquées

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

Les listes de définition ou de glossaire sont utilisées dans le cas particulier où la liste s'effectue sur deux niveaux :

• un élément principal à nommer ;
  
• un élément secondaire qui vient le décrire.

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écrit
• dd 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.