Listes HTML : énumérations avec les balises , et

Les listes HTML présentent des informations et des éléments sélectionné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éfinitions. 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 informations et des éléments de texte sous forme de liste structurée et claire. Selon les besoins, le contenu peut être présenté sous forme de liste ordonnée avec numérotation ou de liste non ordonnée. Depuis HTML5, il existe une troisième variante, les listes de définitions, qui sont spécialement adaptées à l’attribution de termes et à leur description.

Les listes HTML constituent un élément essentiel pour concevoir des sites Web clairs et variés, et permettent de transmettre les informations clairement et efficacement. Cela s’applique aussi bien à une simple énumération, à une numérotation croissante des informations ou à des définitions présentées de façon détaillée.

Quels sont les différents types de listes HTML ?

Comme nous l’avons déjà mentionné, les listes peuvent être présentées de différentes manières dans les documents HTML. Alors que les listes ordonnées et désordonnées sont très souvent utilisées et sont pratiquement présentes sur tous les sites Internet, les listes de définitions (également appelées listes de description) sont beaucoup moins utilisées. Dans les sections suivantes, nous allons examiner de plus près les différents types de listes HTML et leur syntaxe.

Listes ordonnées (Ordered Lists)

Une liste HTML ordonnée se caractérise par un contenu et des éléments listés que vous organisez et structurez selon une hiérarchie souhaitée en utilisant un ordre alphanumérique croissant. L’avantage réside dans la séquence claire et réfléchie des informations. Pour cela, on utilise d’une part la balise HTML ouvrante <ol>, la balise fermante </ol> et plusieurs points <li>...</li> pour les différentes entrées de la liste. Les listes ordonnées conviennent par exemple pour présenter des classements, des instructions é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 alphanumérique des éléments de la liste. À la place, elles utilisent des symboles d’énumération tels que des points de suspension, des tirets, des flèches ou des coches. De cette manière, le contenu peut être présenté de manière structurée sans être hiérarchisé. Les contenus typiques sont par exemple les ingré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éfinitions (Description Lists)

Une liste de définitions vous permet de lister des termes sélectionnés et leur définition, explication ou description associée de manière structurée. Ce type de liste HTML est particulièrement utilisé pour les glossaires, les pages de lexique technique, les spécifications produits ou des explications dans des tutoriels. Pour créer une liste de définitions, utilisez les trois composants suivants :

• <dl>...</dl> : signifie « Definition List » ; identifie le début et la fin de l’élément de liste.
• <dt>...</dt> : signifie « Definition Term » (dt) ; identifie le terme à expliquer.
• <dd>...</dd> : signifie « Definition Description » (dd) ; indique la description, la définition ou l’explication du terme associé et suit immédiatement la balise <dt>.

Les listes de définitions 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’application des listes HTML

Voici un aperçu des domaines d’application et des possibilités d’utilisation des différentes balises pour une liste HTML :

Pourquoi utiliser les listes HTML ?

L’utilisation d’une liste HTML permet d’améliorer l’efficacité et la structure du contenu des pages Web. Parmi les avantages des listes, on peut citer :

• Une meilleure structure, clarté et organisation des informations
• Un meilleur classement par les moteurs de recherche grâce à des éléments de page variés
• Une accessibilité optimisée et une structure sémantique claire des pages pour une meilleure lisibilité
• Une présentation visuelle personnalisée du contenu des pages, notamment en combinaison avec le stylisme CSS