HTML - Listes non ordonnées

Lucas D. - July 19, 2024

Créer une liste non ordonnée

Pour créer une liste non ordonnée en HTML, utilisez la balise <ul>, qui signifie "unordered list" (liste non ordonnée). La balise <ul> est un conteneur pour les éléments de liste, représentés par la balise <li>. Chaque balise <li> représente un élément unique dans la liste.

Conseil: Liste non ordonnée basique en HTML

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>

Une fois rendu dans un navigateur web, ce code affichera une liste à puces avec trois éléments :

Élément 1
Élément 2
Élément 3

Le style de puce par défaut pour les listes non ordonnées est un disque plein, mais vous pouvez modifier le style de puce en utilisant CSS, ce que nous aborderons dans la section suivante.

Les balises <li> doivent être des enfants directs de la balise <ul>. Vous ne pouvez pas avoir d'autres éléments ou du texte directement à l'intérieur de la balise <ul> sans les envelopper dans des balises <li>.

Vous pouvez ajouter autant d'éléments de liste que nécessaire à l'intérieur de la balise <ul>. Chaque balise <li> créera une nouvelle puce et une nouvelle ligne pour l'élément de liste correspondant.

Styliser les listes non ordonnées

Par défaut, les listes non ordonnées en HTML sont affichées avec des puces en forme de disque plein. Cependant, vous pouvez modifier l'apparence de ces puces en utilisant CSS pour les adapter au design de votre site web ou pour améliorer l'aspect de la liste.

Pour changer le style des puces d'une liste non ordonnée, utilisez la propriété list-style-type en CSS. Cette propriété accepte plusieurs valeurs qui déterminent la forme ou le style des puces. Voici quelques valeurs couramment utilisées :

Valeur	Description
`disc`	La puce en forme de disque plein par défaut
`circle`	Une puce en forme de cercle vide
`square`	Une puce en forme de carré plein
`none`	Supprime les puces

Conseil: Modifier le style des puces d'une liste non ordonnée en utilisant CSS

<html>
<head>
  <style>
    ul.circle {
      list-style-type: circle;
    }
    ul.square {
      list-style-type: square;
    }
    ul.none {
      list-style-type: none;
    }
  </style>
</head>
<body>
  <ul class="circle">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>

  <ul class="square">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>

  <ul class="none">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>
</body>
</html>

En plus de modifier le style des puces, vous pouvez également personnaliser leur couleur et leur taille en utilisant CSS. Pour changer la couleur, utilisez la propriété color sur les éléments <li> ou sur l'élément <ul> lui-même. Pour modifier la taille, vous pouvez utiliser la propriété font-size sur les éléments <li>.

Conseil: Modifier la couleur et la taille des puces

<html>
<head>
  <style>
    ul {
      color: blue;
    }
    li {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>
</body>
</html>

Dans cet exemple, les puces seront affichées en bleu et les éléments de la liste auront une taille de police de 20 pixels.

N'oubliez pas que vous pouvez cibler des listes non ordonnées ou des éléments de liste spécifiques en utilisant des classes ou des identifiants CSS pour appliquer différents styles à différentes listes sur la même page.

En utilisant CSS pour styliser vos listes non ordonnées, vous pouvez les rendre attrayantes, les adapter au design de votre site web et améliorer l'expérience utilisateur.

Imbrication des listes non ordonnées

En HTML, vous pouvez créer des listes non ordonnées imbriquées en plaçant un élément <ul> à l'intérieur d'un élément <li> d'une autre liste non ordonnée. Cela vous permet de créer une hiérarchie de listes et de sous-éléments.

Lors de l'imbrication de listes non ordonnées, il est important de penser à l'indentation et à la hiérarchie des éléments de la liste. Chaque liste imbriquée doit être indentée pour montrer qu'il s'agit d'une sous-liste de l'élément parent. Cela aide à rendre la structure de la liste claire et facile à comprendre.

Conseil: Exemple de liste non ordonnée imbriquée

<ul>
  <li>Fruits
    <ul>
      <li>Pommes</li>
      <li>Bananes</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Légumes
    <ul>
      <li>Carottes</li>
      <li>Brocoli</li>
      <li>Épinards</li>
    </ul>
  </li>
  <li>Produits laitiers
    <ul>
      <li>Lait</li>
      <li>Fromage</li>
      <li>Yaourt</li>
    </ul>
  </li>
</ul>

Nous avons une liste non ordonnée principale avec trois éléments : Fruits, Légumes et Produits laitiers. Chacun de ces éléments de liste contient une liste non ordonnée imbriquée avec des éléments plus spécifiques liés à la catégorie parente.

Lorsqu'elle est affichée dans un navigateur web, cette liste imbriquée ressemblera à :

Fruits
- Pommes
- Bananes
- Oranges
Légumes
- Carottes
- Brocoli
- Épinards
Produits laitiers
- Lait
- Fromage
- Yaourt

Remarquez comment les sous-éléments sont indentés pour montrer qu'ils appartiennent à l'élément parent. Cela rend la hiérarchie de la liste claire et aide les utilisateurs à comprendre la relation entre les catégories principales et leurs sous-éléments.

Vous pouvez imbriquer des listes non ordonnées aussi profondément que nécessaire, mais il est généralement préférable de garder l'imbrication à un niveau raisonnable pour éviter de rendre la liste trop complexe ou difficile à suivre. Si vous vous retrouvez à imbriquer des listes sur plus de 2 ou 3 niveaux, demandez-vous s'il n'y aurait pas une meilleure façon d'organiser l'information.

Lors de la mise en forme des listes non ordonnées imbriquées avec CSS, vous pouvez cibler les sous-listes séparément de la liste principale. Par exemple, vous pourriez utiliser un style de puce ou une couleur différente pour les sous-listes afin de les faire ressortir ou de créer une hiérarchie visuelle.

Les listes non ordonnées imbriquées sont un outil utile pour organiser et présenter l'information de manière claire et structurée. En utilisant l'indentation et la hiérarchie, vous pouvez rendre des listes complexes plus faciles à comprendre et à suivre.

Considérations d'accessibilité

Lors de la création de listes non ordonnées en HTML, il est important de prendre en compte l'accessibilité. Cela signifie s'assurer que vos listes sont faciles à comprendre et à naviguer pour tous les utilisateurs, y compris ceux qui utilisent des technologies d'assistance comme les lecteurs d'écran.

Un aspect clé de la création de listes non ordonnées accessibles est d'utiliser des éléments de liste significatifs. Chaque élément <li> doit contenir un texte clair et concis qui transmet le but ou le contenu de cet élément de liste. Évitez d'utiliser des éléments de liste vides ou des éléments de liste qui ne contiennent que des images ou des icônes sans alternatives textuelles.

Conseil: Liste non ordonnée basique

<ul>
  <li>Accueil</li>
  <li>À propos de nous</li>
  <li>Produits</li>
  <li>Contact</li>
</ul>

Chaque élément de liste contient un mot unique et descriptif qui indique clairement le but de cet élément dans la liste, ce qui est utile pour les utilisateurs qui s'appuient sur des lecteurs d'écran pour naviguer sur la page.

Une autre considération importante est de garder la structure de vos listes non ordonnées simple et claire. Utilisez un seul élément <ul> pour contenir tous les éléments de la liste, et assurez-vous que chaque élément <li> est un enfant direct du <ul>. Évitez d'imbriquer d'autres éléments ou contenus dans les éléments <li> à moins que ce ne soit nécessaire pour le sens ou la structure de la liste.

Conseil: Liste non ordonnée imbriquée

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3
    <ul>
      <li>Sous-élément 1</li>
      <li>Sous-élément 2</li>
    </ul>
  </li>
</ul>

Cet exemple montre une structure de liste simple avec trois éléments principaux, où le troisième élément contient une sous-liste imbriquée. La structure est claire et facile à suivre, même pour les utilisateurs qui ne peuvent pas voir la disposition visuelle de la liste.

Il est préférable d'éviter trop d'imbrication de listes non ordonnées. Bien qu'il soit acceptable d'utiliser des listes imbriquées pour montrer des relations hiérarchiques ou pour organiser des informations complexes, trop d'imbrication peut rendre la liste difficile à suivre et à comprendre, en particulier pour les utilisateurs qui s'appuient sur des technologies d'assistance.

En règle générale, essayez de limiter l'imbrication à pas plus de 2 ou 3 niveaux de profondeur. Si vous trouvez que vous avez besoin de plus que cela, réfléchissez s'il pourrait y avoir une meilleure façon d'organiser ou de présenter l'information, comme la diviser en plusieurs listes ou utiliser des titres et des paragraphes à la place.

Exemples et utilisations

Les listes non ordonnées sont utilisées à de nombreux endroits sur les sites web et les contenus numériques. Voici quelques façons dont les listes non ordonnées sont utiles :

Menus de navigation

Les listes non ordonnées sont utilisées pour créer des menus de navigation sur les sites web. Elles permettent d'organiser et d'afficher une liste de liens ou d'éléments de menu de manière claire et facile à cliquer.

Conseil: Menu de navigation simple

<ul>
  <li><a href="/">Accueil</a></li>
  <li><a href="/about">À propos</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Chaque élément du menu est enveloppé dans un élément <li>, et les liens sont créés à l'aide de l'élément <a> avec l'attribut href approprié pointant vers la page ou la section correspondante du site web.

Listes de fonctionnalités

Lors de la présentation des fonctionnalités ou des avantages d'un produit, d'un service ou d'un concept, les listes non ordonnées sont idéales pour présenter l'information de manière concise et facile à lire.

Conseil: Liste des fonctionnalités clés

<h3>Fonctionnalités clés :</h3>
<ul>
  <li>Design responsive</li>
  <li>Personnalisation facile</li>
  <li>Optimisé pour le référencement</li>
  <li>Support 24/7</li>
</ul>

Cette liste non ordonnée présente les fonctionnalités clés d'un produit ou d'un service, permettant aux lecteurs de comprendre rapidement les points principaux.

Listes à puces dans les articles

Lors de la rédaction d'articles, de billets de blog ou de tout type de contenu, l'utilisation de puces peut aider à diviser les longs paragraphes et rendre l'information plus facile à parcourir et à comprendre pour les lecteurs.

Conseils pour une stratégie sur les réseaux sociaux

<p>Pour élaborer une bonne stratégie sur les réseaux sociaux, considérez les points suivants :</p>
<ul>
  <li>Définissez votre public cible</li>
  <li>Fixez des objectifs clairs</li>
  <li>Choisissez les bonnes plateformes de médias sociaux</li>
  <li>Créez du contenu engageant et pertinent</li>
  <li>Suivez et analysez vos performances</li>
</ul>

En utilisant une liste non ordonnée, les points principaux sont clairement séparés et faciles à lire, rendant le contenu plus attrayant et exploitable pour le lecteur.

N'oubliez pas de garder vos éléments de liste courts, pertinents et faciles à comprendre. Utilisez du texte significatif dans les éléments <li> et pensez à utiliser le CSS pour styliser les puces et modifier l'apparence de vos listes non ordonnées afin qu'elles correspondent au design et à l'image de marque de votre site web.