Une liste non ordonnée en HTML vous donne la possibilité de lister les contenus de vos pages Web de manière claire et sans numérotation. 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 lesquelles l’ordre des diffé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> introductif 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> conviennent à la représentation structurée des contenus les plus divers, comme les suivants :

  • Listes classiques de choses à faire : to-do list, liste d’ingrédients
  • Fonctions : liste de caractéristiques de produits ou de performances
  • Liens : liste de liens vers des pages externes ou des profils de réseaux sociaux
  • Tags : liste de mots-clés populaires
  • Listes de prix : présentation des prix des services ou des produits sous forme de liste
  • Dates : présentation structuré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 caractérisent par le fait que les différents points de la liste sont numérotés et donc soumis à une hiérarchie claire.

Syntaxe : voici comment fonctionne 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’introduction (<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éfinissez les différents points de la liste avec la balise d’introduction <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 indication spécifique 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ébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Listes non ordonnées et imbriquées en HTML

Bien que les listes hiérarchiques en HTML soient généralement réalisées avec des listes ordonnées, HTML <ul> offre également la possibilité de subordonner structurellement des éléments de liste. Pour de telles listes imbriqué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 subordonné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 principale « Fruits » est ainsi subdivisée en sous-catégories « Pommes » et « Oranges », dans lesquelles différentes variétés sont à leur tour listées. Pour l’utilisateur dans le navigateur, 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 `
    ` diffé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 Description
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 adaptation stylistique 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 conception plus modulaire et réutilisable, 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éparation claire entre le contenu et la mise en forme, tout en facilitant la gestion et la maintenance du code.

Cet article vous a-t-il été utile ?
Aller au menu principal