Liste HTML : Guide complet pour utiliser et styliser une liste HTML

La liste HTML fait partie des premiers éléments que tout développeur web apprend à utiliser. Qu’il s’agisse de créer un menu, une liste d’étapes, une navigation ou une présentation claire d’informations, elles sont indispensables pour structurer une page web.

Dans ce guide complet sur les listes HTML, vous découvrirez comment utiliser les balises <ul>, <ol> et <li>, personnaliser leur apparence en CSS et adopter les bonnes pratiques pour créer des listes à la fois lisibles, accessibles et optimisées pour le référencement naturel. Même si vous débutez en HTML, vous serez rapidement capable de maîtriser cet élément essentiel du développement web.

• Choisir le type de liste HTML le plus adapté pour rendre vos pages plus claires, plus lisibles et mieux structurées.
• Donner un aspect moderne aux listes HTML grâce aux possibilités offertes par le CSS, des simples puces personnalisées aux numérotations avancées.
• Comprendre les bonnes pratiques pour créer des listes accessibles, faciles à maintenir et adaptées aux standards actuels du développement web.

Beaucoup se limitent aux simples listes à puces sans connaître toutes les possibilités offertes par HTML et CSS. Découvrez comment créer tous les types de listes HTML, les personnaliser avec CSS, réaliser des listes imbriquées, comprendre les pratiques d’accessibilité et aller jusqu’aux compteurs CSS pour fabriquer des numérotations entièrement personnalisées. À la fin de ce tutoriel, les listes HTML n’auront plus aucun secret pour vous.

Pourquoi utiliser une liste HTML ?

Lorsque vous rédigez une page web, toutes les informations ne doivent pas être écrites sous forme de paragraphes.

Imaginez que vous souhaitiez présenter :

• une recette de cuisine
• les étapes d’un tutoriel
• un menu de navigation
• les caractéristiques d’un ordinateur
• une FAQ
• une documentation technique

Dans tous ces cas, une liste est beaucoup plus claire.

Une liste améliore :

• la lisibilité
• l’organisation des informations
• l’accessibilité
• le référencement naturel lorsqu’elle est utilisée correctement

• Autrement dit, elle aide autant vos visiteurs que Google à comprendre votre contenu.

Les différents types de listes HTML

HTML possède trois grandes familles de listes.

Les listes non ordonnées

La liste non ordonnée est certainement celle que vous utilisez le plus souvent.

Elle est créée avec la balise :

<ul>

Toute liste HTML est composée d’éléments.

Ces éléments utilisent toujours :

<li>

Chaque balise <li> représente une ligne.

Exemple :

<ul>

    <li>Premier élément</li>

    <li>Deuxième élément</li>

    <li>Troisième élément</li>

</ul>

Sans <li>, une liste ne peut pas fonctionner.

Chaque élément est donc ajouté avec :

<li>

Par exemple :

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

Résultat :

Ici, l’ordre n’a aucune importance. Que HTML soit placé avant CSS ne change rien.

C’est exactement le rôle d’une liste non ordonnée.

Les listes ordonnées

Lorsque l’ordre devient important, on utilise une liste ordonnée.

La balise devient simplement :

<ol>

Exemple :

<ol>
    <li>Installer Visual Studio Code</li>
    <li>Créer un fichier index.html</li>
    <li>Écrire son premier code HTML</li>
</ol>

Le navigateur affichera automatiquement :

Vous n’avez absolument rien à gérer : La numérotation est automatique.

Si vous ajoutez une étape au milieu, tous les numéros sont recalculés. C’est beaucoup plus pratique qu’écrire les chiffres à la main.

Les listes imbriquées

Une liste peut contenir une autre liste. C’est ce qu’on appelle une liste imbriquée.

Par exemple :

<ul>

    <li>Frontend

        <ul>

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

        </ul>

    </li>

    <li>Backend</li>

</ul>

On obtient alors une hiérarchie.

Cette technique est énormément utilisée dans :

• les menus
• les catégories
• les arbres de dossiers

Les listes de définition

Celles-ci sont moins connues. Elles servent à expliquer un terme.

On utilise trois balises.

<dl>

pour la liste.

<dt>

pour le terme.

<dd>

pour sa définition.

Exemple :

<dl>
    <dt>HTML</dt>
    <dd>Langage permettant de structurer une page web.</dd>

    <dt>CSS</dt>
    <dd>Langage servant à mettre en forme une page web.</dd>
</dl>

Ces listes sont très utiles pour :

• les glossaires
• les FAQ
• les documentations
• les dictionnaires techniques

👉 Pour aller plus loin avec les FAQ : FAQ en CSS pur et Balisage FAQPage en JSON-LD

Les attributs d’une liste HTML

Jusqu’à présent, nous avons utilisé les listes HTML avec leur comportement par défaut.

Pourtant, les listes ordonnées <ol> proposent plusieurs attributs très pratiques qui permettent de personnaliser leur numérotation sans écrire une seule ligne de CSS. Vous pouvez notamment choisir le numéro de départ, modifier le style de numérotation, inverser l’ordre des éléments ou encore définir manuellement le numéro d’un élément précis.

Ces attributs sont simples à utiliser et peuvent vous faire gagner un temps précieux dans de nombreux projets.

L’attribut start

Par défaut, une liste ordonnée commence toujours à 1. Grâce à l’attribut start, vous pouvez choisir un autre numéro de départ.

Par exemple, si les trois premières étapes d’un tutoriel se trouvent sur une autre page, vous pouvez reprendre directement à l’étape 4.

<ol start="4">
    <li>Créer le fichier style.css</li>
    <li>Lier la feuille de style</li>
    <li>Tester le résultat</li>
</ol>

Le navigateur affichera :

Cet attribut est particulièrement utile pour poursuivre une numérotation sur plusieurs chapitres ou plusieurs pages.

L’attribut type

L’attribut type permet de modifier le style de numérotation d’une liste ordonnée sans utiliser CSS.

Voici les principales valeurs disponibles :

Valeur	Résultat
1	1, 2, 3…
A	A, B, C…
a	a, b, c…
I	I, II, III…
i	i, ii, iii…

Par exemple :

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Le résultat sera :

Même si cette fonctionnalité existe toujours en HTML5, il est aujourd’hui généralement recommandé d’utiliser la propriété CSS list-style-type, qui offre davantage de possibilités et sépare correctement la structure de la présentation.

L’attribut value

Il arrive parfois qu’un élément d’une liste doive reprendre une numérotation particulière. C’est précisément le rôle de l’attribut value, qui s’applique directement sur une balise <li>.

Prenons un exemple :

<ol>
    <li>Introduction</li>
    <li>Installation</li>
    <li value="6">Configuration avancée</li>
    <li>Conclusion</li>
</ol>

Le navigateur affichera :

Comme vous pouvez le constater, tous les éléments suivants continuent automatiquement la nouvelle numérotation.

Cette possibilité est surtout utilisée dans des documentations techniques, des procédures administratives ou des documents juridiques où certaines étapes doivent conserver une numérotation précise.

L’attribut reversed

Par défaut, une liste ordonnée compte dans le sens croissant. L’attribut reversed permet d’inverser la numérotation.

<ol reversed>
    <li>Troisième place</li>
    <li>Deuxième place</li>
    <li>Première place</li>
</ol>

Le résultat devient :

Cet attribut est intéressant pour afficher un classement, un compte à rebours ou une liste où les éléments les plus importants apparaissent à la fin tout en conservant une numérotation logique.

Il peut également être combiné avec l’attribut start.

<ol start="5" reversed>
    <li>Étape</li>
    <li>Étape</li>
    <li>Étape</li>
</ol>

Le navigateur affichera alors :

Faut-il privilégier les attributs HTML ou le CSS ?

Les attributs start, value et reversed décrivent le fonctionnement même de la liste. Ils ont donc parfaitement leur place dans votre code HTML.

En revanche, pour modifier uniquement l’apparence de la numérotation, comme utiliser des lettres, des chiffres romains ou des symboles particuliers, il est préférable d’utiliser CSS avec la propriété list-style-type. Cette approche respecte les bonnes pratiques du développement web en séparant le contenu de sa présentation.

Retenez donc une règle simple : utilisez les attributs HTML pour gérer le comportement d’une liste et CSS pour personnaliser son apparence.

Personnaliser les puces avec CSS

Par défaut, le navigateur affiche un rond noir. Mais rien ne vous oblige à le conserver.

CSS permet de choisir le style.

ul {
    list-style-type:square;
}

Les principales valeurs sont :

disc
circle
square
none
...

Par exemple :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

list-style-type:circle;

produit des cercles vides.

Supprimer complètement les puces

Pour les menus, on retire généralement les puces.

ul {
    list-style:none;
    padding:0;
    margin:0;
}

Cette règle est utilisée dans quasiment tous les menus de navigation.

👉 Pour aller plus loin : 5 Exemples de menu responsive en CSS

Personnaliser une liste numérotée

Les listes ordonnées proposent elles aussi plusieurs styles.

ol {
    list-style-type:upper-roman;
}

Les valeurs les plus courantes sont :

decimal
lower-alpha
upper-alpha
lower-roman
upper-roman
...

Modifier la position des puces

Par défaut, les puces sont placées à l’extérieur.

On peut les rentrer dans le texte.

list-style-position:inside;

list-style-position:outside;

La différence paraît légère mais devient importante lorsque les lignes sont longues.

Utiliser une image comme puce

CSS autorise aussi une image.

list-style-image:url("etoile.png");

• Chaque puce devient alors une image.

Aujourd’hui, cette technique est cependant moins utilisée que les pseudo-éléments.

Transformer un élément en élément de liste

Il est également possible de transformer n’importe quel élément HTML en élément de liste grâce à la propriété CSS : display: list-item.

Cette technique est pratique pour ajouter un titre ou une introduction qui s’intègre visuellement à une liste, sans modifier sa structure HTML.

Par exemple, le paragraphe ci-dessous affichera automatiquement une puce, comme s’il s’agissait d’un élément <li>.

<h2 class="titre-liste">Langages du Web</h2>

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

.titre-liste{
    display: list-item;
    margin-left: 40px;
    font-weight: bold;
}

Cette propriété peut également être utilisée avec list-style-type, ::marker ou les compteurs CSS pour créer des présentations originales. Gardez toutefois à l’esprit qu’il s’agit avant tout d’un effet de présentation : lorsque vous créez une véritable liste d’éléments, les balises <ul>, <ol> et <li> restent toujours la solution à privilégier.

Les pseudo-éléments ::marker

Depuis quelques années, le CSS permet de modifier directement les puces.

On utilise le pseudo-élément :

::marker

Exemple :

li::marker{
    color:#ff6600;
    font-size:24px;
}

Les puces deviennent plus grandes et orange. Cette nouveauté simplifie énormément la personnalisation.

Les compteurs CSS

Nous arrivons maintenant dans une fonctionnalité très puissante. Imaginez que vous souhaitiez afficher :

Étape 1

Étape 2

Étape 3

sans écrire les numéros.

C’est exactement le rôle des compteurs CSS.

Ils fonctionnent avec trois propriétés.

counter-reset
counter-increment
counter()

Initialiser un compteur

Tout commence ainsi :

ul{
    counter-reset:etape;
}

Vous créez un compteur nommé : etape

Sa valeur vaut 0.

Incrémenter le compteur

Chaque élément augmente sa valeur.

li{
    counter-increment:etape;
}

Premier élément : 1

Deuxième : 2

Troisième : 3

Afficher le compteur

On utilise un pseudo-élément.

li::before{
    content:counter(etape);
}

Le nombre apparaît automatiquement.

Vous pouvez même écrire :

content:"Étape " counter(etape);

Le code complet :

<ul class="liste-compteur">
    <li>Installer Visual Studio Code</li>
    <li>Créer un fichier index.html</li>
    <li>Écrire son premier code HTML</li>
</ul>

/* Création du compteur */
.liste-etapes{
    counter-reset:etape;
    list-style:none;
    margin:0;
    padding:0;
}

/* Chaque élément augmente le compteur */
.liste-etapes li{
    counter-increment:etape;
    margin:12px 0;
    padding-left:90px;
    position:relative;
    line-height:1.6;
}

/* Affichage du compteur */
.liste-etapes li::before{
    content:"Étape " counter(etape);
    position:absolute;
    left:0;
    top:0;
    font-weight:bold;
    color:#2d89ef;
}

Ajouter un cercle autour des numéros

Les compteurs deviennent très élégants lorsqu’on ajoute un peu de CSS.

li::before{
    content:counter(etape);
    width:35px;
    height:35px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#3498db;
    color:white;
    margin-right:10px;
}

Vous obtenez une numérotation moderne semblable à celle que l’on retrouve dans de nombreuses interfaces.

Les compteurs imbriqués

Les compteurs peuvent également être hiérarchiques.

1
1.1
1.2
2
2.1

Pour cela, CSS possède :

counters()

Cette fonction concatène plusieurs niveaux de compteurs.

Elle est particulièrement utile pour :

• les plans
• les documentations
• les sommaires automatiques

<ol class="plan">
    <li>
        Introduction
        <ol>
            <li>Présentation du projet</li>
            <li>Prérequis</li>
        </ol>
    </li>
    <li>
        Installation
        <ol>
            <li>Configurer l'environnement</li>
        </ol>
    </li>
</ol>

.plan ol{
    list-style:none;
    margin:0;
    padding-left:32px;
    counter-reset:section;
}

.plan > li,
.plan ol > li{
    counter-increment:section;
    margin:10px 0;
    position:relative;
}

.plan li::before{
    content:counters(section, ".") " ";
    font-weight:700;
    color:#3498db;
    margin-right:8px;
}

Créer son propre style de numérotation

CSS permet même d’inventer un nouveau système grâce à :

@counter-style

Exemple :

@counter-style etoile{
    system:cyclic;
    symbols:"★";
    suffix:" ";
}

Puis :

ol{
    list-style:etoile;
}

Chaque élément affichera une étoile.

Vous pouvez créer des flèches, des carrés, des emojis ou pratiquement n’importe quel symbole.

<ol class="liste-validation">
    <li>Installer Visual Studio Code</li>
    <li>Créer un fichier HTML</li>
    <li>Commencer à coder</li>
</ol>

@counter-style validation{
    system:cyclic;
    symbols:"✅";
    suffix:" ";
}

/* Application du style */
.liste-validation{
    list-style:validation;
    margin:0;
    padding-left:35px;
}

.liste-validation li{
    margin:10px 0;
    line-height:1.6;
}

Les bonnes pratiques

Lorsque vous utilisez une liste HTML, posez-vous toujours une question simple.

L’ordre est-il important ? Si oui :

• utilisez <ol>.

Sinon :

• préférez <ul>.

N’utilisez jamais une liste uniquement pour créer une mise en page.

HTML décrit le sens du contenu avant son apparence. Le CSS s’occupe ensuite de la présentation.

Les erreurs les plus fréquentes

Les débutants commettent souvent les mêmes erreurs.

• La première consiste à oublier les balises <li>.
• La deuxième est d’utiliser des <br> pour créer une fausse liste.
• La troisième consiste à remplacer une liste par plusieurs paragraphes.

Ces mauvaises habitudes rendent votre code moins lisible et moins accessible.

Accessibilité et référencement

Les listes sont très appréciées des lecteurs d’écran.

Elles permettent aux personnes malvoyantes de connaître immédiatement :

• le nombre d’éléments
• leur ordre
• leur organisation

Les moteurs de recherche apprécient également une structure claire.

Sans améliorer directement votre positionnement, une liste bien utilisée aide Google à mieux comprendre votre contenu.

---

---

Un liste HTML semble très simples au premier abord, mais elle cache de nombreuses possibilités. En maîtrisant les balises <ul>, <ol>, <dl> et <li>, vous pourrez structurer vos pages de manière beaucoup plus professionnelle. En ajoutant ensuite CSS, ::marker et les compteurs CSS, vous pourrez créer des listes modernes, élégantes et entièrement personnalisées sans avoir à modifier votre code HTML.

Le meilleur moyen de progresser reste de pratiquer. Essayez de recréer des menus, des check-lists, des plans de cours ou des étapes de tutoriels, puis amusez-vous à personnaliser leur apparence avec CSS. Vous découvrirez rapidement que les listes HTML sont bien plus puissantes qu’elles n’en ont l’air et qu’elles deviendront un outil incontournable dans tous vos futurs projets web.