Cours de Developpement Web
HTML5 — Module 5 : Listes
5
par IARO
Listes non ordonnees, ordonnees, de definition et imbriquees • Niveau debutant
Module 5
Listes HTML5
Listes non ordonnees, ordonnees, de definition et imbriquees
Objectifs du module
Maitriser la liste non ordonnee <ul> et ses elements <li>
Utiliser la liste ordonnee <ol> et ses attributs start, reversed, type
Creer des listes de definition <dl> avec <dt> et <dd>
Imbriquer des listes a plusieurs niveaux de profondeur
Utiliser les listes pour construire des menus de navigation
Appliquer CSS pour personnaliser l apparence des listes
Connaitre les bonnes pratiques d accessibilite pour les listes
Niveau Duree Prerequis Module
Debutant 2 a 3h Modules 1 a 4 5 / 16
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 1 / 17
HTML5 Module 5 — Listes par IARO
1 Introduction — Les trois types de listes HTML5
Les listes sont l un des elements les plus utilises en HTML. Elles permettent de grouper des elements lies de
maniere semantique. HTML5 propose trois types de listes, chacun avec un usage specifique. Le choix du bon type
est important pour la semantique et l accessibilite.
Type de liste Balise Usage principal Marqueur par defaut
Non ordonnee <ul> Elements sans ordre precis Puce ronde (disc)
Ordonnee <ol> Elements avec ordre ou sequence Chiffres (1. 2. 3.)
De definition <dl> Termes et leurs definitions/valeurs Aucun marqueur
Seuls les elements <li> peuvent etre enfants directs de <ul> et <ol>. Seuls <dt> et <dd> peuvent etre enfants
directs de <dl>. Mettre d autres elements directement dans une liste est invalide en HTML5 et peut causer des
problemes d affichage et d accessibilite.
i
2 La liste non ordonnee — ul et li
La liste non ordonnee est la plus utilisee en HTML. Elle regroupe des elements dont l ordre n a pas d importance
semantique. Chaque element de la liste est represente par la balise li (list item).
HTML RENDU NAVIGATEUR
<ul> HTML5
<li>HTML5</li> CSS3
<li>CSS3</li>
JavaScript
<li>JavaScript</li>
[Link]
<li>[Link]</li>
</ul>
Les attributs globaux (id, class, style, aria-*) s appliquent sur et . Il n y a pas d attributs specifiques a en HTML5
(type etait HTML4, utiliser CSS list-style-type a la place).
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 2 / 17
HTML5 Module 5 — Listes par IARO
[Link]
<!-- ul : liste non ordonnee basique -->
<ul>
<li>Premier element</li>
<li>Deuxieme element</li>
<li>Troisieme element</li>
</ul>
<!-- Avec classes CSS pour la mise en forme -->
<ul class="liste-cours">
<li class="actif">HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- Liste sans puce (via CSS) -->
<ul style="list-style: none; padding: 0;">
<li>Element sans puce</li>
<li>Element sans puce</li>
</ul>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 3 / 17
HTML5 Module 5 — Listes par IARO
3 Personnalisation CSS des listes non ordonnees
La propriete CSS list-style-type permet de changer le marqueur des listes. On peut aussi utiliser list-style-image
pour une image personnalisee, ou list-style-position pour controler la position du marqueur.
Valeur CSS Marqueur affiche Exemple d utilisation
disc Puce pleine ronde (defaut) Listes de contenu standard
circle Cercle vide Sous-listes niveau 2
square Carre plein Elements de menu, features
none Aucun marqueur Navigation, menus CSS
disclosure-open Triangle ouvert Accordeons, details
disclosure-closed Triangle ferme Accordeons fermes
ethiopic-halehame Caracteres ethiopiens Contenu multilingue
georgian Numerotation georgienne Listes internationales
[Link]
/* CSS : personnalisation complete d une liste */
ul {
list-style-type: square; /* puce carree */
list-style-position: inside; /* puce a l interieur */
padding-left: 20px;
margin: 16px 0;
}
/* Image comme puce personnalisee */
[Link] {
list-style-image: url('[Link]');
}
/* Raccourci : list-style */
ul { list-style: square inside url('[Link]'); }
/* Puce personnalisee avec ::before (methode moderne) */
ul li::before {
content: '>';
color: #43e97b;
font-weight: bold;
margin-right: 8px;
}
ul li { list-style: none; } /* supprimer la puce originale */
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 4 / 17
HTML5 Module 5 — Listes par IARO
4 La liste ordonnee — ol et ses attributs
La liste ordonnee est utilisee quand l ordre des elements est significatif : etapes d un tutoriel, classement,
instructions a suivre dans un ordre precis, recette de cuisine, plan de cours. Les elements sont numerotes
automatiquement.
HTML RENDU NAVIGATEUR
<ol type="A" start="3"> 1. C. Troisieme etape
<li>Troisieme etape</li> 2. D. Quatrieme etape
<li>Quatrieme etape</li>
3. E. Cinquieme etape
<li>Cinquieme etape</li>
</ol>
<ol reversed>
<li>Top 1</li>
<li>Top 2</li>
<li>Top 3</li>
</ol>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 5 / 17
HTML5 Module 5 — Listes par IARO
5 Attributs de la balise ol
Attribut Valeurs Description Exemple
type 1aiIA Type de numerotation de la liste type="A"
start nombre entier Valeur de depart du premier element start="5"
reversed (booleen) Compte a rebours (descendant) reversed
value nombre entier (sur li) Valeur specifique d un element (affecte la suite) value="10"
Valeur type Numerotation Exemple complet
1 (defaut) Chiffres arabes 1. 2. 3. 4. 5. ...
a Lettres minuscules a. b. c. d. e. ...
A Lettres majuscules A. B. C. D. E. ...
i Chiffres romains min. i. ii. iii. iv. v. ...
I Chiffres romains maj. I. II. III. IV. V. ...
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 6 / 17
HTML5 Module 5 — Listes par IARO
[Link]
<!-- Liste ordonnee standard -->
<ol>
<li>Creer le fichier HTML</li>
<li>Ajouter le DOCTYPE</li>
<li>Ecrire le contenu</li>
</ol>
<!-- Commencer a 5 -->
<ol start='5'>
<li>Cinquieme point</li> <!-- affiche : 5. -->
<li>Sixieme point</li> <!-- affiche : 6. -->
</ol>
<!-- Compte a rebours -->
<ol reversed>
<li>Or (1er)</li> <!-- affiche : 3. -->
<li>Argent (2e)</li> <!-- affiche : 2. -->
<li>Bronze (3e)</li> <!-- affiche : 1. -->
</ol>
<!-- Lettres majuscules -->
<ol type="A">
<li>Option A</li>
<li>Option B</li>
<li>Option C</li>
</ol>
<!-- Chiffres romains -->
<ol type="I">
<li>Chapitre I</li>
<li>Chapitre II</li>
<li>Chapitre III</li>
</ol>
<!-- Valeur specifique sur un li -->
<ol>
<li>Etape 1</li>
<li value='10'>Etape 10</li> <!-- saute a 10 -->
<li>Etape 11</li> <!-- continue : 11 -->
</ol>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 7 / 17
HTML5 Module 5 — Listes par IARO
6 La liste de definition — dl, dt, dd
La liste de definition associe des termes (dt = definition term) a leurs descriptions ou valeurs (dd = definition
description). Elle est adaptee aux glossaires, dictionnaires, fiches techniques, metadonnees de documents et
paires cle/valeur.
HTML RENDU NAVIGATEUR
<dl> HTML
<dt>HTML</dt> HyperText Markup Language
<dd>HyperText Markup Language</dd>
Langage de structure du web
<dd>Langage de structure du web</dd>
CSS
Cascading Style Sheets
<dt>CSS</dt>
JavaScript
<dd>Cascading Style Sheets</dd>
Langage de script du web
<dt>JavaScript</dt>
<dd>Langage de script du web</dd>
</dl>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 8 / 17
HTML5 Module 5 — Listes par IARO
[Link]
<!-- Glossaire technique -->
<dl>
<dt>DOM</dt>
<dd>Document Object Model : representation en arbre du HTML</dd>
<dt>API</dt>
<dd>Application Programming Interface</dd>
<dd>Interface permettant a des logiciels de communiquer</dd>
</dl>
<!-- Fiche produit : paires cle / valeur -->
<dl>
<dt>Marque</dt> <dd>IARO</dd>
<dt>Version</dt> <dd>2025.1</dd>
<dt>Licence</dt> <dd>MIT</dd>
<dt>Langues</dt> <dd>Francais</dd><dd>Anglais</dd>
</dl>
<!-- Groupes avec div (HTML5 valide) -->
<dl>
<div>
<dt>HTML5</dt>
<dd>Langage de structure</dd>
</div>
<div>
<dt>CSS3</dt>
<dd>Langage de style</dd>
</div>
</dl>
Balise Role Peut contenir Rendu par defaut
<dl> Conteneur de la liste dt, dd, div (groupement) Bloc, pas de marqueur
<dt> Terme a definir (cle) Contenu inline (pas de bloc) Gras, pas d indentation
<dd> Description/valeur du terme Contenu de flux (blocs et inline) Indente (40px)
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 9 / 17
HTML5 Module 5 — Listes par IARO
7 Listes imbriquees — Niveaux multiples
On peut imbriquer des listes a l interieur d autres listes pour representer des hierarchies. La liste imbriquee doit
toujours etre placee a l interieur d un element li du niveau parent. Il n y a pas de limite au nombre de niveaux, mais
3 niveaux maximum est recommande pour la lisibilite.
HTML RENDU NAVIGATEUR
<ul> Langages web
<li>Langages web HTML5
<ul>
CSS3
<li>HTML5</li>
Flexbox
<li>CSS3
Grid
<ul>
JavaScript
<li>Flexbox</li>
<li>Grid</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 10 / 17
HTML5 Module 5 — Listes par IARO
[Link]
<!-- ul imbrique dans ol -->
<ol>
<li>Frontend
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>[Link]</li>
<li>Python</li>
</ul>
</li>
<li>Base de donnees
<ul>
<li>MySQL</li>
<li>MongoDB</li>
</ul>
</li>
</ol>
<!-- ol imbrique dans ol : sommaire numerote -->
<ol>
<li>Introduction
<ol type='a'>
<li>Definition</li>
<li>Histoire</li>
</ol>
</li>
<li>Les bases
<ol type='a'>
<li>Structure</li>
<li>Syntaxe</li>
</ol>
</li>
</ol>
Ne jamais placer une liste imbriquee en dehors d un element li. La structure correcte est : ul > li > ul > li. La
structure incorrecte ul > ul est invalide et cause des problemes d accessibilite car les lecteurs d ecran ne peuvent
pas interpreter correctement la hierarchie.
!
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 11 / 17
HTML5 Module 5 — Listes par IARO
8 Menus de navigation avec des listes
Les menus de navigation sont construits avec des listes non ordonnees a l interieur d une balise nav. C est la
pratique standard en HTML5 : la liste donne la semantique de groupe, CSS s occupe de l affichage horizontal.
[Link]
<!-- Navigation horizontale (CSS transforme la liste en barre) -->
<nav aria-label="Navigation principale">
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/cours">Cours</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
/* CSS pour rendre la liste horizontale */
nav ul { list-style: none; display: flex; gap: 24px; padding: 0; }
nav ul li a { text-decoration: none; color: #fff; }
<!-- Menu deroulant avec sous-liste -->
<nav aria-label="Menu principal">
<ul>
<li><a href="/">Accueil</a></li>
<li>
<a href="/cours">Cours</a>
<ul>
<li><a href="/cours/html5">HTML5</a></li>
<li><a href="/cours/css3">CSS3</a></li>
<li><a href="/cours/js">JavaScript</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Fil d ariane avec ol (ordre significatif) -->
<nav aria-label="Fil d ariane">
<ol>
<li><a href="/">Accueil</a></li>
<li><a href="/cours">Cours</a></li>
<li aria-current="page">HTML5 Module 5</li>
</ol>
</nav>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 12 / 17
HTML5 Module 5 — Listes par IARO
Pourquoi utiliser une ul pour la navigation et non des liens directs ? Les lecteurs d ecran annoncent 'liste de X
elements' avant de lire les liens, ce qui donne aux utilisateurs une idee de la taille du menu. C est une pratique d
accessibilite importante recommandee par les WCAG 2.1.
i
9 CSS avance pour les listes
[Link]
/* Reinitialiser les styles de liste (reset) */
.reset-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Liste avec separateurs */
.liste-sep li { border-bottom: 1px solid #eee; padding: 8px 0; }
.liste-sep li:last-child { border-bottom: none; }
/* Puce personnalisee avec ::before */
.liste-custom li { list-style: none; padding-left: 20px; }
.liste-custom li::before {
content: '>';
color: #43e97b;
font-weight: bold;
position: absolute;
margin-left: -20px;
}
/* Liste en grille */
.liste-grille ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.liste-grille li { list-style: none; background: #f0f; padding: 12px; }
/* Compteur CSS avec counter() */
[Link]-counter { counter-reset: section; list-style: none; }
[Link]-counter li::before {
counter-increment: section;
content: 'Section ' counter(section) '. ';
color: #4f7cff;
font-weight: bold;
}
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 13 / 17
HTML5 Module 5 — Listes par IARO
10 Accessibilite des listes
Les listes HTML ont des roles ARIA implicites que les lecteurs d ecran utilisent pour annoncer le type et le nombre
d elements. Il est important de respecter la structure correcte pour preserver ces roles.
Element Role ARIA implicite Annonce lecteur d ecran Attributs utiles
<ul> list Liste de X elements aria-label
<ol> list Liste de X elements aria-label
<li> listitem Element X sur Y aria-current
<dl> term/definition Liste de definitions aria-label
<dt> term Terme -
<dd> definition Definition -
[Link]
<!-- aria-label pour decrire la liste -->
<ul aria-label="Technologies enseignees">
<li>HTML5</li>
<li>CSS3</li>
</ul>
<!-- aria-current pour l element actif -->
<nav>
<ul>
<li><a href="/" aria-current="page">Accueil</a></li>
<li><a href="/cours">Cours</a></li>
</ul>
</nav>
<!-- role=list quand CSS supprime le style (Safari) -->
<!-- Quand list-style: none est applique en CSS, Safari -->
<!-- peut supprimer le role list. Forcer avec role=list -->
<ul role="list" style="list-style: none;">
<li>Element 1</li>
<li>Element 2</li>
</ul>
11 Bonnes pratiques — Listes HTML5
Pratique Recommandation
Choisir le bon type ul pour elements sans ordre, ol pour sequence, dl pour definition/valeur
Enfants directs valides ul/ol : seulement li. dl : seulement dt et dd (ou div groupant dt/dd)
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 14 / 17
HTML5 Module 5 — Listes par IARO
Pas de saut de balise Toujours ouvrir ul, puis li. Ne jamais mettre du texte directement dans ul
Imbrication dans li La liste imbriquee doit etre dans un li, jamais directement dans ul/ol
Texte descriptif Ajouter aria-label sur la liste si son role n est pas clair par le contexte
role=list si CSS supprime puces Safari peut retirer le role list si list-style:none, ajouter role='list'
Navigation = ul dans nav Toujours utiliser ul pour les menus de navigation dans une balise nav
Breadcrumb = ol dans nav Le fil d ariane utilise ol (ordre significant) avec aria-current='page'
Max 3 niveaux d imbrication Au-dela de 3 niveaux, la hierarchie devient difficile a comprendre
Styliser via CSS, pas HTML Ne pas utiliser type= pour le style, utiliser list-style-type en CSS
li autonome dans la liste Chaque li doit avoir du sens independamment des autres elements
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 15 / 17
HTML5 Module 5 — Listes par IARO
12 Exercice pratique — Page de cours avec listes completes
Construisez cette page qui utilise les trois types de listes, les imbrications et la navigation.
[Link] 1/2
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8"><title>Cours HTML5 IARO</title></head>
<body>
<!-- Navigation avec ul -->
<nav aria-label="Navigation" role="navigation">
<ul role="list">
<li><a href="/" aria-current="page">Accueil</a></li>
<li><a href="/cours">Cours</a>
<ul>
<li><a href="/cours/html5">HTML5</a></li>
<li><a href="/cours/css3">CSS3</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<!-- Sommaire ordonne -->
<h2>Sommaire du cours</h2>
<ol aria-label="Sommaire">
<li>Introduction aux listes</li>
<li>Liste non ordonnee (ul)
<ol type="a">
<li>Syntaxe de base</li>
<li>Personnalisation CSS</li>
</ol>
</li>
<li>Liste ordonnee (ol)</li>
<li>Liste de definition (dl)</li>
</ol>
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 16 / 17
HTML5 Module 5 — Listes par IARO
[Link] 2/2
<!-- Technologies : liste non ordonnee -->
<h2>Technologies</h2>
<ul aria-label="Technologies du cours">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- Glossaire : liste de definition -->
<h2>Glossaire</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
</main>
</body></html>
13 Resume complet du Module 5
Concept A retenir
<ul> Liste non ordonnee : elements sans ordre precis, puce ronde par defaut
<ol> Liste ordonnee : elements avec sequence, numerotee automatiquement
<li> Element de liste, enfant direct de ul ou ol uniquement
<dl> Liste de definition : association terme / description
<dt> Terme de definition (cle), toujours suivi de un ou plusieurs dd
<dd> Description ou valeur du terme, peut etre multiple pour un dt
ol type='1 a A i I' Type de numerotation : chiffres, lettres min/maj, romains min/maj
ol start='N' Commencer la numerotation a N (entier, peut etre negatif)
ol reversed Numerotation descendante (compte a rebours)
li value='N' Valeur specifique pour un li, affecte la suite de la numerotation
Imbrication Liste dans un li : ul > li > ul > li (jamais ul > ul directement)
list-style-type CSS : disc circle square none ou autres valeurs pour le marqueur
list-style: none Supprimer les puces (menus), ajouter role='list' pour Safari
Navigation Menus = ul dans nav, breadcrumb = ol dans nav avec aria-current
role=list Forcer le role liste sous Safari quand list-style:none est applique
aria-label sur liste Decrire le but de la liste si le contexte ne suffit pas
Max 3 niveaux Au-dela de 3 niveaux imbriques, privilegier une autre structure
Fin du Module 5 — Prochain : Module 6 : Tableaux HTML5
IARO | Cours de Developpement Web | HTML5 - Module 5 : Listes Page 17 / 17