Balise HTML <ul>

  • Page précédente <u>
  • Page suivante <var>

Définition et utilisation

<ul> balise pour définir une liste non ordonnée (dotée de puces).

Utilisez <ul> balise et balise <li> pour créer une liste non ordonnée.

Astuce :Utilisez CSS pourDéfinir le style de la liste.

Astuce :Pour une liste ordonnée, utilisez <ol> balise.

Veuillez également consulter :

Tutoriel HTML :Liste HTML

Manuel de référence HTML DOM :Objet Ul

Tutoriel CSS :Définir le style de la liste

Exemple

Exemple 1

Une liste HTML non ordonnée :

<ul>
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>

Essayer vous-même

Exemple 2

Définir différents types de styles de liste (utiliser CSS) :

<ul style="list-style-type:circle">
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>
<ul style="list-style-type:disc">
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>
<ul style="list-style-type:square">
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>

Essayer vous-même

Exemple 3

Agrandir et réduire la hauteur de ligne dans la liste (utiliser CSS) :

<ul style="line-height:180%">
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>
<ul style="line-height:80%">
  <li> Café </li>
  <li>Thé</li>
  <li> lait </li>
</ul>

Essayer vous-même

Exemple 4

Créer une autre liste dans la liste (liste imbriquée) :

<ul>
  <li> Café </li>
  <li> Thé </li>
    <ul>
      <li> Pu'er </li>
      <li>Thé vert</li>
    </ul>
  </li>
  <li> lait </li>
</ul>

Essayer vous-même

Exemple 5

Créer une liste imbriquée plus complexe :

<ul>
  <li> Café </li>
  <li> Thé </li>
    <ul>
      <li> Pu'er </li>
      <li> Thé vert </li>
        <ul>
          <li> Biluochun </li>
          <li> Longjing </li>
        </ul>
      </li>
    </ul>
  </li>
  <li> lait </li>
</ul>

Essayer vous-même

Attributs globaux

<ul> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<ul> Les balises prennent également en charge Attributs d'événement dans HTML.

Configuration CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <ul> Élément :

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Essayer vous-même

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support
  • Page précédente <u>
  • Page suivante <var>