Listes en HTML - Algorism

Listes à puces et numérotées

ul · ol

<ul> (*unordered list*) pour une liste sans ordre, <ol> (*ordered list*) quand l'ordre compte. Chaque élément est un <li> (*list item*).

Liste à puces

Liste numérotée

La numérotation commence à 3

Numérotation décroissante (compte à rebours)

Lettres a, b, c (autres valeurs : A, i, I, 1)

Sous-liste : un <ul> dans un <li>

listes.html

<h2>Ingrédients du cours</h2>
<ul>
  <li>Du code</li>
  <li>Des exercices</li>
</ul>

<h2>Étapes</h2>
<ol>
  <li>Écrire le programme</li>
  <li>Le tester</li>
  <li>Corriger les erreurs</li>
</ol>

Rendu

Deux titres. Sous le premier, deux lignes précédées d'une puce ; sous le second, trois lignes numérotées 1, 2, 3.

Imbriquer et décrire

dl · nav

Une liste peut en contenir une autre (plan, menu à plusieurs niveaux). <dl> associe des termes à leurs définitions.

<li>Langages <ul>…</ul></li>

Sous-liste placée dans le <li> du parent

<dl>

Liste de descriptions (glossaire, FAQ)

<dt>Terme</dt>

Le terme décrit

<dd>Définition</dd>

Sa description

Un menu de navigation est une liste de liens

imbrique.html

<ul>
  <li>Programmation
    <ul>
      <li>Python</li>
      <li>C</li>
    </ul>
  </li>
  <li>Réseaux</li>
</ul>

<dl>
  <dt>HTML</dt>
  <dd>Décrit la structure d'une page.</dd>
  <dt>CSS</dt>
  <dd>Décrit son apparence.</dd>
</dl>

Rendu

« Programmation » avec deux sous-puces (Python, C), puis « Réseaux ». Dessous, chaque terme (HTML, CSS) est suivi de sa définition, légèrement décalée vers la droite.

📃 Le cours : organiser en listes

Les listes sont partout : menus de navigation, plans, étapes d'une recette, résultats d'une recherche. En HTML elles ont un sens : un lecteur d'écran annonce « liste de 3 éléments » et permet de passer d'un élément à l'autre. Une suite de lignes séparées par des <br> n'offre rien de tel.

Liste à puces ou numérotée ?

Pose-toi la question : si l'on change l'ordre des éléments, est-ce que le sens change ? Les étapes d'une procédure ou un classement s'écrivent avec <ol> ; des ingrédients, des langages, des liens avec <ul>. Les puces et les numéros sont ensuite de la décoration, réglée en CSS.

Règles de construction

Les seuls enfants directs d'un <ul> ou d'un <ol> sont des <li>.
Un <li> peut contenir n'importe quoi : du texte, un lien, une image, des paragraphes, une autre liste.
Chaque <li> se ferme avec </li> (c'est facultatif pour le navigateur, mais c'est plus clair).

Numérotation d'une liste ordonnée

start choisit le premier numéro, reversed inverse l'ordre, type change le style (1, a, A, i, I). On peut même forcer un numéro avec <li value="10">.

numerotation.html

<ol start="3" type="a">
  <li>Troisième lettre : c</li>
  <li>Quatrième lettre : d</li>
</ol>

<ol reversed>
  <li>Trois</li>
  <li>Deux</li>
  <li>Un</li>
</ol>

Rendu

c. Troisième lettre : c
d. Quatrième lettre : d
3. Trois
2. Deux
1. Un

Listes imbriquées

Pour faire un plan à plusieurs niveaux, place la sous-liste à l'intérieur du <li> auquel elle se rattache, après son texte (voir la deuxième carte). Les navigateurs adaptent le style des puces selon le niveau.

Un menu de navigation est une liste

Les menus sont des listes de liens dans un <nav>. Ensuite, le CSS enlève les puces (list-style: none) et aligne les éléments en ligne (voir Flexbox). Garder une vraie liste donne au menu sa structure pour les lecteurs d'écran.

menu.html

<nav aria-label="Menu principal">
  <ul>
    <li><a href="index.html">Accueil</a></li>
    <li><a href="cours.html">Cours</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Listes de descriptions : dl, dt, dd

<dl> regroupe des paires terme / description : glossaire, questions-réponses, fiche technique. Chaque <dt> (terme) est suivi d'un ou plusieurs <dd> (descriptions).

Mettre en forme les listes avec CSS

Besoin	Propriété CSS
supprimer les puces	`list-style: none;`
changer la puce	`list-style-type: square;` (cercle, disque, carré, `decimal`, `lower-alpha`…)
retirer le retrait à gauche	`padding-left: 0;`
aligner en ligne un menu	`display: flex;` sur le `<ul>`

⚠️ Erreurs fréquentes

Placer la sous-liste à côté d'un li au lieu de dedans

À éviter

faux.html

<ul>
  <li>Programmation</li>
  <ul>                      <!-- enfant direct de ul : invalide -->
    <li>Python</li>
  </ul>
</ul>

Correct

correct.html

<ul>
  <li>Programmation
    <ul>                    <!-- dans le li du parent -->
      <li>Python</li>
    </ul>
  </li>
</ul>

Un li hors d'une liste, ou du texte directement dans un ul

<li> n'a de sens qu'à l'intérieur d'un <ul> ou d'un <ol>, et <ul> n'accepte que des <li> comme enfants. Un texte ou un <p> posé directement dans <ul> est invalide : mets-le dans un <li>.

Fabriquer une liste à la main

À éviter

faux.html

<p>- Python<br>- C<br>- Java</p>   <!-- ce n'est pas une liste pour le navigateur -->

Correct

correct.html

<ul><li>Python</li><li>C</li><li>Java</li></ul>

Numéroter à la main dans un ol

Écrire <li>1. Premier</li> dans un <ol> affiche « 1. 1. Premier » : le navigateur numérote déjà. Laisse-le faire, et change l'ordre sans te soucier des numéros.

Choisir ul ou ol d'après l'apparence

Ne prends pas <ol> « parce que je veux des numéros » si l'ordre ne signifie rien : décide d'après le sens, puis ajuste l'apparence avec CSS.

📋 Aide-mémoire

<ul> (sans ordre) ou <ol> (avec ordre) ; seuls enfants directs : des <li>.
Un <li> peut contenir du texte, des liens, des images, des paragraphes ou une sous-liste.
Sous-liste : dans le <li> du parent, jamais directement dans le <ul>.
<ol start="3" reversed type="a"> règle numéro de départ, sens et style ; ne numérote pas à la main.
<dl> / <dt> / <dd> : paires terme / définition ; menu = <nav> + <ul> de liens.
Puces, retrait, alignement : CSS (list-style, padding, display: flex).