Une liste non ordonnée en HTML vous donne la pos­si­bi­lité de lister les contenus de vos pages Web de manière claire et sans nu­mé­ro­ta­tion. En plus de la balise HTML de base <ul>, il est également important de connaître la balise de liste <li> et l’attribut type.

Que sont les listes non ordonnées et à quoi servent-elles ?

Les HTML Unsorted Lists ou Unordered Lists sont des éléments HTML utilisés pour créer des listes dans les­quelles l’ordre des dif­fé­rents éléments de la liste ne joue aucun rôle. Les listes pratiques peuvent être intégrées à l’aide de la balise HTML (en anglais tag) <ul>, un <ul> in­tro­duc­tif marquant le point de départ de la liste et un </ul> la fin. Chaque élément de la liste est encadré par la balise HTML <li>, sans aucune limite quant au nombre d’éléments.

Les listes HTML <ul> con­vien­nent à la re­pré­sen­ta­tion struc­tu­rée des contenus les plus divers, comme les suivants :

  • Listes clas­siques de choses à faire : to-do list, liste d’in­gré­dients
  • Fonctions : liste de ca­rac­té­ris­tiques de produits ou de per­for­mances
  • Liens : liste de liens vers des pages externes ou des profils de réseaux sociaux
  • Tags : liste de mots-clés po­pu­laires
  • Listes de prix : pré­sen­ta­tion des prix des services ou des produits sous forme de liste
  • Dates : pré­sen­ta­tion struc­tu­rée des rendez-vous à venir
Conseil

L’inverse des listes non ordonnées en HTML sont les HTML Ordered Lists, c’est-à-dire les listes HTML ordonnées. Celles-ci se ca­rac­té­ri­sent par le fait que les dif­fé­rents points de la liste sont numérotés et donc soumis à une hié­rar­chie claire.

Syntaxe : voici comment fonc­tionne le tag HTML <ul>

Si vous souhaitez intégrer une liste non ordonnée en HTML, vous pouvez le faire à n’importe quel endroit de la zone <body> de vos pages Web. Comme nous l’avons déjà mentionné, une balise d’in­tro­duc­tion (<ul>) et une balise de fermeture (</ul>) servent de repères pour le début et la fin de la liste, tandis que vous dé­fi­nis­sez les dif­fé­rents points de la liste avec la balise d’in­tro­duc­tion <li> et la balise de fermeture </li>. Voici la syntaxe de base de HTML <ul> :

<body>
<ul>
<li>Point de liste 1</li>
<li>Point de liste 2</li>
<li>Point de liste 3</li>
<li>...</li>
</ul>
</body>
html

Comme aucune in­di­ca­tion spé­ci­fique n’a été donnée pour le symbole de liste dans ce cas, HTML utilise le symbole standard d’une puce (bullet), c’est-à-dire le point centré typique.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Listes non ordonnées et im­bri­quées en HTML

Bien que les listes hié­rar­chiques en HTML soient gé­né­ra­le­ment réalisées avec des listes ordonnées, HTML <ul> offre également la pos­si­bi­lité de su­bor­don­ner struc­tu­rel­le­ment des éléments de liste. Pour de telles listes im­bri­quées, il suffit d’insérer d’autres listes non ordonnées à l’intérieur d’un élément <ul> existant, comme dans l’exemple suivant avec deux listes su­bor­don­nées :

<body>
<p><strong>Liste non ordonnée imbriquée :</strong></p>
<ul>
    <li>Fruits
        <ul>
            <li>Pommes
                <ul>
                    <li>Granny Smith</li>
                    <li>Gala</li>
                    <li>Fuji</li>
                </ul>
            </li>
            <li>Oranges
                <ul>
                    <li>Navel</li>
                    <li>Orange sanguine</li>
                    <li>Mandarine</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
html

La catégorie prin­ci­pale « Fruits » est ainsi sub­di­vi­sée en sous-ca­té­go­ries « Pommes » et « Oranges », dans les­quelles dif­fé­rentes variétés sont à leur tour listées. Pour l’uti­li­sa­teur dans le na­vi­ga­teur, le tout se présente à peu près ainsi :

Image: Exemple de liste HTML imbriquée et non ordonnée
Dans cet exemple, trois éléments `
    ` dif­fé­rents sont utilisés.

Adapter les symboles de liste <ul> avec list-style-type

La propriété CSS list-style-type, qui peut être appliquée via l’attribut HTML style ou une feuille de style externe, permet d’adapter à tout moment les symboles de liste des listes non ordonnées en HTML. De cette manière, vous pouvez par exemple définir les symboles suivants :

valeur-list-style-type Des­crip­tion
disc Cercle rempli ; choix HTML standard sans attribut style
circle Cercle non rempli
square Carré
none Pas de symbole de liste

Dans le code, cette adap­ta­tion sty­lis­tique se présente de la manière suivante si vous souhaitez utiliser des cercles non remplis :

<body>
<p><strong>Pommes :</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
</body>
html
Note

Pour une con­cep­tion plus modulaire et réu­ti­li­sable, il est conseillé de définir les styles CSS dans un fichier distinct ou dans la balise <style> située dans la section <head>. Cela permet de maintenir une sé­pa­ra­tion claire entre le contenu et la mise en forme, tout en fa­ci­li­tant la gestion et la main­te­nance du code.

Aller au menu principal