Structures de listes

Le HTML nous propose deux types de listes : les listes classiques telles que nous les côtoyons dans tout éditeur de texte, c’est à dire des listes ordonnées (numérotées, ou indexées), ou des listes non ordonnées (généralement employant des puces), et les définitions de listes, un peu à la mode glossaire, ou, dictionnaire.

Les listes classiques

<ul>
	<li><img src="a.jpg">
		<time datetime="2013-01-14">14 jan 2013</time>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </li>
   <li><img src="b.jpg">
       <time datetime="2013-01-14">14 jan 2013</time>
       <p>Fusce at justo vitae arcu venenatis bibendum.</p>
   </li>
</ul>

Il est également possible d’imbriquer des listes, ainsi que de mélanger leurs types, mais il est important de bien intégrer la liste imbriquée à l’intérieur d’un élément <li> et non à l’extérieur. L’exemple suivant n’est pas correct :

<ul>
	<li>Element 1</li>
	<ul>
		<li>Element 1.1</li>
		<li>Element 1.2</li>
	</ul>
	<li>Element 2</li>
</ul>

Celui-ci est correct, l’élément <ul> imbriqué se trouve bien au sein de l’élément <li> dans lequel il est imbriqué et non à l’extérieur comme dans l’exemple précédent :

<ul>
	<li>Element 1
		<ul>
			<li>Element 1.1</li>
			<li>Element 1.2</li>
		</ul>
	</li>
	<li>Element 2</li>
</ul>

Les listes de définition

Il existe une autre famille de listes, les listes de définition. Le balisage se compose d’élément <dl> (définition list), <dt> (définition term) et <dd> (définition description).

Comme son nom l’indique, ce type de liste permet de mettre en place des listes de définitions, cependant, il ne faut pas exclusivement se cantonner à l’image du glossaire, ou du dictionnaire, où nous plaçons des mots face à leur définition.

Les éléments <dt> et <dd> peuvent également être associés à tout type de balisage, que ceux-ci soit de type inline ou de type bloc. De ce fait, nous pouvons aisément étendre les possibilités de ce type de liste à la mise en structure de dialogue (dt – narrateur, dd – dialogue), à la présentation d’une équipe (dt – member, dd – role et position), à l’énumération d’une bibliographie (dt – titre ouvrage, dd – description et présentation)… , bref les possibilités sont nombreuses :

<dl>
	<dt>Element 1</dt>
	<dd>Description 1</dd>
	<dt>Element 2</dt>
	<dd>Description 2</dd>
</dl>

Tout n’est que listes!

À y regarder de plus près dans un contenu de texte, tout n’est que listes. En effet, un texte est une liste de paragraphes, un paragraphe est une liste de phrases, une phrase équivaut à une liste de mots et un mot contient une liste de lettres… bref… où commencer ? où s’arrêter ?

Et bien, dès que la structure sémantique que nous avons à disposition pour représenter le contenu de notre page, ne contient pas de balises adéquates, il y a de fortes chances pour qu’il s’agisse d’une liste.