Listes HTML : énu­mé­ra­tions avec les balises , et

Les listes HTML pré­sen­tent des in­for­ma­tions et des éléments sé­lec­tion­nés dans un document HTML sous forme de liste. Selon les besoins, il peut s’agir d’une liste ordonnée, d’une liste non ordonnée ou d’une liste de dé­fi­ni­tions. Les balises HTML <li>, <ol>, <ul> et <dl> sont utilisées pour leur création.

Qu’est-ce qu’une liste HTML ?

Les listes HTML sont utilisées dans HTML pour présenter des in­for­ma­tions et des éléments de texte sous forme de liste struc­tu­rée et claire. Selon les besoins, le contenu peut être présenté sous forme de liste ordonnée avec nu­mé­ro­ta­tion ou de liste non ordonnée. Depuis HTML5, il existe une troisième variante, les listes de dé­fi­ni­tions, qui sont spé­cia­le­ment adaptées à l’at­tri­bu­tion de termes et à leur des­crip­tion.

Les listes HTML cons­ti­tuent un élément essentiel pour concevoir des sites Web clairs et variés, et per­met­tent de trans­mettre les in­for­ma­tions clai­re­ment et ef­fi­ca­ce­ment. Cela s’applique aussi bien à une simple énu­mé­ra­tion, à une nu­mé­ro­ta­tion crois­sante des in­for­ma­tions ou à des dé­fi­ni­tions pré­sen­tées de façon détaillée.

Quels sont les dif­fé­rents types de listes HTML ?

Comme nous l’avons déjà mentionné, les listes peuvent être pré­sen­tées de dif­fé­rentes manières dans les documents HTML. Alors que les listes ordonnées et dé­sor­don­nées sont très souvent utilisées et sont pra­ti­que­ment présentes sur tous les sites Internet, les listes de dé­fi­ni­tions (également appelées listes de des­crip­tion) sont beaucoup moins utilisées. Dans les sections suivantes, nous allons examiner de plus près les dif­fé­rents types de listes HTML et leur syntaxe.

Listes ordonnées (Ordered Lists)

Une liste HTML ordonnée se ca­rac­té­rise par un contenu et des éléments listés que vous organisez et struc­tu­rez selon une hié­rar­chie souhaitée en utilisant un ordre al­pha­nu­mé­rique croissant. L’avantage réside dans la séquence claire et réfléchie des in­for­ma­tions. Pour cela, on utilise d’une part la balise HTML ouvrante <ol>, la balise fermante </ol> et plusieurs points <li>...</li> pour les dif­fé­rentes entrées de la liste. Les listes ordonnées con­vien­nent par exemple pour présenter des clas­se­ments, des ins­truc­tions étape par étape ou des listes de questions.

La syntaxe des listes ordonnées se présente comme suit :

<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
<li>Quatrième élément de la liste</li>
<li>...</li>
</ol>

La sortie ressemble à ceci :

Close

Listes non ordonnées (Unordered Lists)

Dans une liste HTML non ordonnée, vous n’utilisez pas l’ordre al­pha­nu­mé­rique des éléments de la liste. À la place, elles utilisent des symboles d’énu­mé­ra­tion tels que des points de sus­pen­sion, des tirets, des flèches ou des coches. De cette manière, le contenu peut être présenté de manière struc­tu­rée sans être hié­rar­chisé. Les contenus typiques sont par exemple les in­gré­dients des recettes, les villes et les pays ou les listes de noms. Pour créer une liste non ordonnée, la balise HTML d’ouverture <ul>, la balise de fermeture </ul> et plusieurs points <li>...</li> sont utilisés.

La syntaxe des listes non ordonnées se présente comme suit :

<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
<li>Quatrième élément de la liste</li>
<li>...</li>
</ul>

Close

Listes de dé­fi­ni­tions (Des­crip­tion Lists)

Une liste de dé­fi­ni­tions vous permet de lister des termes sé­lec­tion­nés et leur dé­fi­ni­tion, ex­pli­ca­tion ou des­crip­tion associée de manière struc­tu­rée. Ce type de liste HTML est par­ti­cu­liè­re­ment utilisé pour les glos­saires, les pages de lexique technique, les spé­ci­fi­ca­tions produits ou des ex­pli­ca­tions dans des tutoriels. Pour créer une liste de dé­fi­ni­tions, utilisez les trois com­po­sants suivants :

• <dl>...</dl> : signifie « De­fi­ni­tion List » ; identifie le début et la fin de l’élément de liste.
• <dt>...</dt> : signifie « De­fi­ni­tion Term » (dt) ; identifie le terme à expliquer.
• <dd>...</dd> : signifie « De­fi­ni­tion Des­crip­tion » (dd) ; indique la des­crip­tion, la dé­fi­ni­tion ou l’ex­pli­ca­tion du terme associé et suit im­mé­dia­te­ment la balise <dt>.

Les listes de dé­fi­ni­tions HTML sont créées sur la base de la syntaxe suivante :

<dl>
<dt>Terme 1</dt>
<dd>Description ou définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Description ou définition du terme 2</dd>
<dt>Terme 3</dt>
<dd>Description ou définition du terme 3</dd>
<dt>...</dt>
<dd>...</dd>
</dl>

Close

Domaines d’ap­pli­ca­tion des listes HTML

Voici un aperçu des domaines d’ap­pli­ca­tion et des pos­si­bi­li­tés d’uti­li­sa­tion des dif­fé­rentes balises pour une liste HTML :

Pourquoi utiliser les listes HTML ?

L’uti­li­sa­tion d’une liste HTML permet d’améliorer l’ef­fi­ca­cité et la structure du contenu des pages Web. Parmi les avantages des listes, on peut citer :

• Une meilleure structure, clarté et or­ga­ni­sa­tion des in­for­ma­tions
• Un meilleur clas­se­ment par les moteurs de recherche grâce à des éléments de page variés
• Une ac­ces­si­bi­lité optimisée et une structure sé­man­tique claire des pages pour une meilleure li­si­bi­lité
• Une pré­sen­ta­tion visuelle per­son­na­li­sée du contenu des pages, notamment en com­bi­nai­son avec le stylisme CSS