How To Create A Nested List In Html

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

Summary

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>