La très forte présence des listes dans les pages Web est dûe à la
volonté des auteurs d'apporter toujours plus de sens à la
structuration faite avec HTML.
Beaucoup de regroupements sont désormais considérés comme des listes,
en particulier les regroupements de liens (barre de navigation, liens
dans les hors-textes latéreaux ou les pieds de page). On voit même
parfois des formulaires de saisie considérés comme des listes de
zones de saisie.
ul : liste non ordonnée
Les listes non ordonnées sont de très loin le type de listes le plus souvent utilisé.
Une liste non ordonnée se fait avec 2 élements HTML :
- l'élément ul marque les limites de la liste,
- l'élément li définit une ligne à l'intérieur de la liste.
L'imbrication des li à l'intérieur d'un élément ul est obligatoire.
Par défaut le navigateur représente les listes non ordonnées de la façon suivante :
- il y a une marge avant et une marge après le contenu de la liste. Cette marge est égale à la hauteur d'une ligne de texte.
- les lignes de la liste sont mises en retrait par une marge à l'intérieur gauche de la liste,
- les lignes sont précédées d'un signe indiquant la profondeur de la liste (un rond plein, un rond vide, un rectangle plein),
- les lignes sont affichées les unes en dessous des autres, sans marge pour les séparer.
Comme d'habitude des règles de style CSS peuvent modifier cet affichage par défaut. Voir dans le tutoriel CSS la partie consacrée aux listes.
Une liste ul ne peut pas être contenue dans un paragraphe p. La construction
<p>Pour mon anniversaire, je veux : <ul> <li>un X-Wing rouge</li> <li>un sabre-laser</li> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ul> </p>
sera traduite par le navigateur comme :
<p>Pour mon anniversaire, je veux :</p> <ul> <li>un X-Wing rouge</li> <li>un sabre-laser</li> <li>un chapeau de Gandalf</li> <li>de l'herbe à pipe de la Comté.</li> </ul> <p></p>
Le 1er paragraphe sera fermé avant la liste et le </p>
générera un paragraphe vide.
Liste du contenu du tutoriel HTML
Réalisez la liste non ordonnée permettant d'obtenir la page ci-dessous.
