Tag HTML <ul>
Le tag <ul>, Il est utilisé pour créer une liste à puces (non ordonnée), où la modification de l’ordre des éléments ne change pas significativement sa signification.
Chaque élément de la liste à puces doit être placé dans le tag <li>. Si les styles CSS sont appliqués à la liste, le contenu du tag <li> les accepte également.
Le tag <ul> est un élément de bloc et occupe toute la largeur disponible, et sa hauteur dépend de la quantité de contenu.
Par défaut, les listes à puces sont affichées sur la page Web. Par défaut, les listes à puces sont affichées sur la page Web sous forme de liste et commencent par un petit cercle noir et un petit retrait du bord gauche.
Pour créer les listes numérotées on utilise le tag <ol>.
Syntaxe
Le contenu de l’élément est écrit entre les tags ouvrant (<ul>) et fermant (</ul>).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<ul>
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>
</body>
</html>Résultat
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<ul type="circle">
<li>Élément de liste </li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>
<ul type="square">
<li>Élément de liste</li>
<li>Élément de liste</li>
<li>Élément de liste</li>
</ul>
</body>
</html>Résultat
Pour modifier le type de marquer on peut utiliser les propriétés CSS list-style-type ou list-style-image.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h2>Exemples des listes non ordonnées:</h2>
<ul style="list-style-type: square">
<li>Boissons gazeuses</li>
<li>Boissons chaudes</li>
<li>Glaciers</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>Résultat
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| compact | compact | Réduit l'indentation et l'espacement des lignes.
Non supporté en HTML5. |
| type | disc square circle |
Définit le type de marqueur de liste.
Non supporté en HTML5. |
Le tag <ul> supporte également les Attributs globaux et les Attributs d'événements.
Comment styler le tag HTML <ul> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <ul>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <ul>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <ul>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <ul>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
