How to create a sub list inside a list (a nested list) in HTML ?

Examples of how to create a sub list inside a list (a nested list) in HTML:

Table of contents

Create a list in HTML
Create a nested list in HTML
Styling a list in HTML
- Change bullets shape
- Change bullets color
References

Create a list in HTML

Example

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

results

How to create a sub list inside a list (a nested list) in HTML ?

To create an ordered list, used "ol" instead of "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>

results

Create a nested list in 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>

results

Another example with an oredered list:

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>

results

Styling a list in HTML

Examples of how to style a list:

Change bullets shape

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

results

Change bullets color

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

returns

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>

returns

References

Hi, I'm Ben, the Founder of moonbooks.org. I work as a research scientist specializing in Earth satellite remote sensing, particularly focusing on Fire detection using VIIRS and ABI sensors. My areas of expertise include Python, Machine Learning, and Open Science. Feel free to reach out if you notice any errors on the site. I am constantly striving to enhance it. Thank you!

How to create a sub list inside a list (a nested list) in HTML ?

Create a list in HTML

Create a nested list in HTML

Styling a list in HTML

Change bullets shape

Change bullets color

References

Benjamin

Skills