<ul>
La balise <ul>
est utilisée en HTML pour définir une liste non ordonnée. Elle permet de regrouper des éléments de liste sans ordre spécifique, représentés par la balise <li>
.
Structure et syntaxe de la balise <ul>
Structure et syntaxe de base
Voici la syntaxe de base d’une balise <ul>
:
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
Comme nous pouvons le voir, il s'agit d'une balise qui regroupe généralement une ou plusieurs balises <li>
afin d'établir une liste d'éléments non ordonnés.
Exemple d’utilisation
Voici un exemple typique d'utilisation de la balise <ul>
:
<ul>
<li>Pain</li>
<li>Lait</li>
<li>Œufs</li>
</ul>
Dans cet exemple, la balise <ul>
contient une liste d'éléments (<li>
) qui représentent les éléments d'une liste d'achats.
Attributs
La balise <ul>
accepte quelques attributs HTML classiques comme :
class
: pour appliquer des styles CSS à l'ensemble de la liste.id
: pour identifier la liste de manière unique.style
: pour appliquer des styles inline à la liste.
Bonnes pratiques
La balise <ul>
doit être utilisée pour regrouper des éléments qui ne nécessitent pas un ordre spécifique.
Si l'ordre des éléments est important, il est préférable d'utiliser une liste ordonnée, représentée par la balise
<ol>
.
Évitez aussi de trop imbriquer les listes <ul>
pour ne pas rendre le contenu difficile à lire et à maintenir. 😋
Différence avec d’autres balises similaires
<ol>
: La balise<ol>
est utilisée pour définir une liste ordonnée, où l'ordre des éléments a une importance. Contrairement à la liste non ordonnée<ul>
, elle est généralement affichée avec des numéros ou des lettres.<dl>
: La balise<dl>
est utilisée pour créer une liste de définitions, où chaque élément a une définition associée, contrairement à<ul>
qui est principalement utilisée pour des éléments de liste sans relation spécifique entre eux.
Compatibilité des navigateurs
La balise <ul>
est prise en charge par tous les navigateurs modernes.
Navigateur | Compatibilité |
---|---|
Chrome | Oui |
Firefox | Oui |
Safari | Oui |
Edge | Oui |
Internet Explorer | Oui |