Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Exemples de comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Table des matières

Créer une liste en HTML
Créer une liste imbriquée en HTML
Styliser une liste en HTML
- Changer la forme des puces
- Changer la couleur des puces
Références

Créer une liste en HTML

Exemple

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<body>

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
</ul>

</body>
</html>

donne

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Pour créer une liste ordonnée, utilisez "ol" au lieu de "ul"

List of items:
<ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ol>

donne

Créer une liste imbriquée en HTML

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>

donne

Un autre exemple avec une liste oredered:

List of items:
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ol>

donne

Styliser une liste en HTML

Exemples de comment styliser une liste em HTML:

Changer la forme des puces

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul li{
  list-style-type: "→";
}

</style>

<body>

List of items:
<ul class="a">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul class="b">
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Changer la couleur des puces

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

</style>

<body>

List of items:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Another example with a different color for the nested list:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>HTML Test Page</title>
</head>

<style>

ul {
  list-style: none;
}

ul.a li::before{
  content: "\2022";
  color: red;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

ul.b li::before{
  content: "\2022";
  color: green;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

</style>

<body>

List of items:
<ul class="a">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
      <ul class="b">
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
      </ul>
  <li>item 4</li>
  <li>item 5</li>
</ul>


</body>
</html>

donne

Références

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Comment créer une sous-liste dans une liste (une liste imbriquée) en HTML ?

Créer une liste en HTML

Créer une liste imbriquée en HTML

Styliser une liste en HTML

Changer la forme des puces

Changer la couleur des puces

Références

Benjamin

Skills