Listes HTML
En HTML, il existe trois types de listes : les listes non ordonnées, ordonnées et de description. Chacune d’elles est définie à l’aide de balises différentes. Voyons cela.
Listes non ordonnées HTML
Nous utilisons les listes non ordonnées pour regrouper des éléments qui n’ont pas d’ordre numérique. Lorsque l’ordre des éléments de la liste change, le sens ne change pas. Pour créer une liste non ordonnée, nous utilisons la balise <ul>. Cette balise se présente par paires ; le contenu est écrit entre les balises ouvrante <ul> et fermante </ul>.
Chaque élément d’une liste non ordonnée est déclaré à l’intérieur de la balise <li>.
Exemple de la balise HTML <ul> pour créer une liste non ordonnée :
Un exemple de liste non ordonnée|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Par défaut, les éléments des listes non ordonnées sont marqués par des puces (petits cercles noirs). Cependant, le style de puce par défaut des éléments de la liste peut être modifié à l’aide d’un attribut type.
L’attribut type est utilisé pour modifier le style de puce par défaut des éléments de la liste. Remarque : l’attribut type est obsolète en HTML5. Utilisez plutôt la propriété CSS list-style-type.
Exemple de la balise HTML <ul> utilisée pour créer une liste non ordonnée, où les éléments sont marqués par des puces :
Exemple d’un attribut type pour les listes HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Résultat
Vous pouvez également utiliser la propriété CSS list-style-type ou list-style-image pour spécifier le type d’un élément de liste.
Exemple de la balise HTML <ul> utilisée avec la propriété CSS list-style-type pour créer une liste non ordonnée :
Exemple d’une propriété list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>Listes ordonnées HTML
Une liste ordonnée HTML est utilisée pour lister des éléments marqués par des nombres. Elle commence par la balise <ol>. Cette balise se présente par paires ; le contenu est écrit entre les balises ouvrante <ol> et fermante </ol>.
Chaque élément de la liste ordonnée commence par la balise ouvrante <li> et se termine par la balise fermante </li>.
Exemple de la balise HTML <ol> pour créer une liste ordonnée :
Exemple d’une liste ordonnée HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Par défaut, les éléments de la liste ordonnée sont marqués par des nombres. Si vous souhaitez créer une liste ordonnée avec des lettres ou des chiffres romains, il vous suffit d’ajouter type="a" ou type="I" à la balise <ol>. Remarque : l’attribut type est obsolète en HTML5. Utilisez plutôt la propriété CSS list-style-type.
Exemple de la balise HTML <ol> pour créer une liste ordonnée avec des lettres et des chiffres romains :
Exemple de différents marqueurs d’éléments de liste
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>Listes de description HTML
Les listes de description HTML sont utilisées pour associer des termes à leurs descriptions, comme dans un dictionnaire ou un glossaire.
Pour créer une liste de description, nous utilisons la balise <dl>. Cette balise se présente par paires.
Dans <dl>, nous utilisons les balises <dt> pour un terme/nom dans une liste de description et <dd> pour la description d’un terme/nom dans une liste de description.
Exemple de la balise HTML <dl> pour créer une liste de description :
Exemple d’une liste de description|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Résultat
Listes imbriquées HTML :
Une liste imbriquée contient une liste à l’intérieur d’une autre liste.
Exemple d’une liste imbriquée HTML :
Exemple d’une liste imbriquée HTML :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>Contrôle du comptage de la liste
Par défaut, l’énumération dans une liste ordonnée commence à 1. Utilisez l’attribut start pour commencer le comptage à partir d’un nombre spécifié. Vous pouvez également utiliser l’attribut reversed pour compter à rebours, ou l’attribut value sur un <li> spécifique pour définir manuellement son numéro.
Exemple d’une liste HTML pour compter à partir d’un nombre spécifié :
Exemple d’une liste HTML pour compter à partir d’un nombre spécifié :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Liste horizontale avec CSS
Les listes HTML peuvent être stylées de nombreuses façons avec CSS.
Vous pouvez styliser les listes HTML à l’aide de différentes propriétés CSS. Par exemple, vous pouvez créer un menu de navigation en affichant la liste horizontalement.
Exemple d’une liste horizontale avec CSS :
Exemple d’une liste horizontale avec CSS :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>Pratique
What are the different types of HTML lists as stated in the provided article?