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

Le marqueur d'élément par défaut (cercle noir) peut être modifié à l'aide de l'attribut type.

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>:

Coloration du texte dans le tag HTML <ul>:

Styles de mise en page du texte pour la tag HTML <ul>:

Autres propriétés utiles pour le tag HTML <ul>:


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées