LISTES SIMPLES

Les principales listes en CSS sont les listes non ordonnées (UL) et les listes ordonnées (OL). Pour écrire des listes valides, il faut retenir les points suivants:

1. Un élément UL ou un élément OL ne peuvent contenir que des éléments LI (items de liste).
2. Un élément LI peut contenir du texte, des éléments de type en-ligne, ou encore des éléments de type bloc. On peut donc placer une série de paragraphes dans un item de liste.

Voici un exemple de liste valide (précédée d'un titre):

<h2>Nos services</h2>
<ul>
	<li>Conception de sites web</li>
	<li>Hébergement</li>
	<li>Développement d'applications web</li>
</ul>[/code]
Celle-ci est valide également:
[code]<h2>Nos services</h2>
<ul>
	<li>
		<h3>Conception de sites web</h3>
		<p>Nous concevons des sites funs et branchés, frais et bigarrés.</p>
		<p>Nous travaillons avec des technologies qui fleurent bon le bisounours.</p>
	</li>
	<li>
		<h3>Hébergement</h3>
		<p>Besoin de caser vos pages quelque part?</p>
	</li>
	<li>
		<h3>Développement d'applications web</h3>
		<p>Plus agile que nos applications, tu meurs (ou bien tu te reconvertis comme contorsionniste extraordinnaire).</p>
	</li>
</ul>

Le choix entre liste non ordonnée (UL) et liste ordonnée (OL) n'est pas toujours évident. Les listes ordonnées sont utiles pour une liste d'éléments dont l'ordre ne doit pas être modifié (les étapes d'une procédure, par exemple). Mais on les utilise aussi lorsqu'on veut marquer plus fortement une énumération.

LISTES IMBRIQUÉES

On utilise les listes imbriquées essentiellement pour:

• des tables des matières;
• des listes de liens hiérarchisées (plan du site ou menu déroulant).

La syntaxe valide des listes imbriquées découle des règles que nous avons rappelé plus haut: les UL et OL ne peuvent contenir que des LI, et les LI peuvent contenir tout élément de type en-ligne ou de type bloc. Ce qui signifie qu'une liste de deuxième niveau devra forcément être placée dans un LI.

Voici un exemple qui pourrait correspondre à un menu déroulant, à un plan de site, ou à un menu latéral où les sous-menus sont affichés en léger décalage, par exemple.

<ul>
	<li>
		<a href="/">Accueil</a>
	</li>
	<li>
		<a href="/services/">Nos services</a>
		<ul>
			<li><a href="/services/web/">Conception de sites web</a></li>
			<li><a href="/services/hebergement/">Hébergement</a></li>
			<li><a href="/services/developpement/">Développement d'applications web</a></li>
		</ul>
	</li>
	<li>
		<a href="/entreprise/">L'entreprise</a>
		<ul>
			<li><a href="/entreprise/equipe/">Notre équipe</a></li>
			<li><a href="/entreprise/historique/">Historique</a></li>
		</ul>
	</li>
	<li>
		<a href="/contact/">Nous contacter</a>
	</li>
</ul>

Pour vérifier que vos listes imbriquées sont bien codées, n'oubliez pas d'utiliser le validateur! http://validator.w3.org/