# HTML : comment créer une liste non ordonnée ?

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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/) (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>`](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-list/), 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*](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-ordered-list/), 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>` :

```html
<body>
<ul>
<li>Point de liste 1</li>
<li>Point de liste 2</li>
<li>Point de liste 3</li>
<li>...</li>
</ul>
<div class="hash d-none" hidden>hash_9dafb5b5c074781858b66abe3a63ed374b84e346</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

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.

## 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 :

```html
<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>
<div class="hash d-none" hidden>hash_9dafb5b5c074781858b66abe3a63ed374b84e346</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

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](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/c/csm_liste-non-ordonnee-html-exemple_f7cbee3f1d.webp "Exemple de liste HTML imbriquée et non ordonnée")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/liste-non-ordonnee-html-exemple.png) 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](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/attributs-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 :

<table>
  <thead>
    <tr>
      <th>`valeur-list-style-type`</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`disc`</td>
      <td>Cercle rempli ; choix HTML standard sans attribut `style`</td>
    </tr>
    <tr>
      <td>`circle`</td>
      <td>Cercle non rempli</td>
    </tr>
    <tr>
      <td>`square`</td>
      <td>Carré</td>
    </tr>
    <tr>
      <td>`none`</td>
      <td>Pas de symbole de liste</td>
    </tr>
  </tbody>
</table>

Dans le code, cette adaptation stylistique se présente de la manière suivante si vous souhaitez utiliser des cercles non remplis :

```html
<body>
<p><strong>Pommes :</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
<div class="hash d-none" hidden>hash_9dafb5b5c074781858b66abe3a63ed374b84e346</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

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.


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/liste-non-ordonnee-en-html/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/liste-non-ordonnee-en-html/) for AI/LLM consumption.