0Pricing
HTML Academy · Leçon

Listes non ordonnées ul et li

Créez des listes à puces avec les éléments ul et li.

Listes non ordonnées ul et li est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Qu’est-ce qu’une liste non ordonnée ?

Une liste non ordonnée affiche des éléments avec des points de puce — l’ordre n’a pas d’importance :

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

L’élément ul

L’élément <ul> (liste non ordonnée) entoure la liste. Seuls les elements <li> doivent être ses enfants directs :

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->

Mise en forme des puces avec CSS

Contrôlez les marqueurs de liste avec CSS :

ul {
  list-style-type: disc;       /* default: filled circle */
  /* circle, square, none */
}

/* Custom bullet with ::before */
ul li::before {
  content: '→ ';
  color: blue;
}

/* Remove all list styling: */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Navigation avec ul

Les menus de navigation sont sémantiquement une liste de liens :

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

li peut contenir tout contenu

Les éléments de liste peuvent contenir tout contenu de flux :

<ul>
  <li>
    <strong>HTML</strong>
    <p>The structure of the web.</p>
  </li>
  <li>
    <strong>CSS</strong>
    <p>The presentation layer.</p>
  </li>
</ul>

Listes en ligne

Affichez les éléments de liste horizontalement avec CSS :

<ul class="inline-list">
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<!-- CSS: -->
<!--
.inline-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
-->

Usages sémantiques de ul

Usages sémantiques courants des listes non ordonnées :

  • Menus de navigation
  • Listes de fonctionnalités
  • Nuages d’étiquettes
  • Liens associés
  • Listes d’ingrédients dans les recettes

ul ou p pour plusieurs éléments

Lorsque vous avez plusieurs éléments associés, une liste est sémantiquement préférable à plusieurs paragraphes distincts :

<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>

<!-- Good: -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Marqueurs de liste avec list-style-image

Utilisez une image personnalisée comme puce de liste :

ul {
  list-style-image: url('/icons/check.svg');
}

/* More reliable: use background-image on li::before */
ul li {
  list-style: none;
  padding-left: 1.5rem;
  background: url('/icons/check.svg') no-repeat left center;
  background-size: 1rem;
}

Raccourci list-style

Le raccourci list-style définit le type, la position et l’image :

ul {
  list-style: square inside;    /* type + position */
  list-style: none;             /* remove bullets */
}

/* list-style-position: inside vs outside */
ul {
  list-style-position: inside;  /* bullet inside padding box */
  /* outside = default, bullet outside text block */
}

Accessibilité

Remarques sur l’accessibilité des listes :

  • Les lecteurs d’écran annoncent le type de liste et le nombre d’éléments
  • Utiliser list-style: none peut empêcher certains lecteurs d’écran de l’annoncer comme une liste — ajoutez role="list" pour préserver la sémantique
<ul style="list-style: none" role="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Vérification rapide

Quel est l’unique élément enfant direct valide de ul ?

Récapitulatif : listes non ordonnées

Éléments essentiels des listes non ordonnées :

  • <ul> entoure une liste où l’ordre n’a pas d’importance
  • <li> est l’unique enfant direct valide
  • Puce par défaut : disc ; modifiez-la with list-style-type
  • Les menus de navigation sont sémantiquement des listes de liens <ul>
  • Ajoutez role="list" si vous supprimez les puces avec CSS

Questions Fréquemment Posées

La leçon « Listes non ordonnées ul et li » est-elle gratuite ?

Oui — le texte complet de « Listes non ordonnées ul et li » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Listes non ordonnées ul et li » ?

Créez des listes à puces avec les éléments ul et li. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Listes non ordonnées ul et li » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Listes non ordonnées ul et li
  2. Listes ordonnées ol, start, reversed et type
  3. Listes de descriptions dl, dt et dd
  4. Listes imbriquées et style des listes
← Retour à HTML Academy