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.

liste non ordonnée
Exemple : liste non ordonnée
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste non ordonnée</title> </head> <body> <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> </body> </html>

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.

liste du contenu du tutoriel HTML

Code à compléter

Exercice : liste du contenu du tutoriel HTML
<!DOCTYPE html> <html lang="fr"> </html>

Une solution possible

Exercice : liste du contenu du tutoriel HTML
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Liste contenu tutoriel HTML</title> </head> <body> <p>Tutoriel HTML</p> <ul> <li>Principes généraux</li> <li>Les liens</li> <li>Document et en-tête</li> <li>Structure</li> <li>Groupement</li> <li>Embarqués</li> <li>Texte</li> <li>Formulaire</li> </ul> </body> </html>