Balise HTML <ul>
La balise HTML <ul> est utilisée pour spécifier une liste non ordonnée, qui regroupe un ensemble d'éléments sans ordre numérique. Lorsque l'ordre des éléments de la liste est modifié, le sens ne change pas. Habituellement, les éléments d'une liste non ordonnée sont affichés avec une puce. Elle peut prendre différentes formes telles qu'un cercle, un point ou un carré.
Chaque élément d'une liste non ordonnée est déclaré à l'intérieur de la <li> balise.
La balise <ul> est un élément de niveau bloc et occupe tout l'espace horizontal disponible. Sa hauteur dépend du contenu à l'intérieur du conteneur. Une liste non ordonnée est généralement rendue sous forme de liste à puces.
La balise <ol> représente également une liste d'éléments et crée une liste ordonnée. Cependant, elle diffère de <ul>, car l'ordre dans la balise <ol> a un sens. Par défaut, les éléments d'une liste ordonnée sont affichés avec des numéros.
Les balises <ul> et <ol> peuvent être imbriquées aussi profondément que souhaité. Les listes imbriquées peuvent alterner entre <ul> et <ol>. Cependant, il convient de noter que lors de l'imbriquation d'une liste dans une autre, la liste interne doit être placée à l'intérieur d'un élément <li> de la liste externe. Cela signifie que l'enfant direct d'une liste doit être un élément <li>, mais cet élément <li> peut contenir une autre liste. Il est possible de modifier le marqueur des éléments de liste avec CSS. Toutefois, le sens sémantique exprimé par le choix d'un type de liste ne peut pas être modifié avec CSS.
Syntaxe
La balise <ul> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<ul>) et de fermeture (</ul>).
Exemple de la balise HTML <ul> :
Exemple de balise HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Résultat
Vous pouvez utiliser l'attribut type pour modifier le style de puce par défaut des éléments de liste. Remarque : L'attribut type est déprécié en HTML5. Pour le développement web moderne, il est recommandé d'utiliser CSS list-style-type à la place.
Exemple de la balise HTML <ul> avec l'attribut type :
Exemple de balise HTML <ul> avec l'attribut type
<!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>Vous pouvez également utiliser la propriété CSS list-style-type ou list-style-image pour définir le type d'un élément de liste.
Exemple de la balise HTML <ul> utilisée avec la propriété CSS list-style-type :
Exemple de balise HTML <ul> avec la propriété CSS 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>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| compact | compact | Spécifie que la liste doit être rendue dans un style compact. Non pris en charge en HTML 5. |
| type | disc square circle | Définit le type de marqueur. Non pris en charge en HTML 5. |
La balise <ul> prend également en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <ul>
{
"tag_name": "ul"
}Pratique
Parmi les affirmations suivantes concernant la balise HTML <ul>, lesquelles sont vraies selon l'article https://www.w3docs.com/learn-html/html-ul-tag.html ?