×

Multi-Level List [5/17]

Creating a list with multiple levels is not a big trick.

To begin with, create a higher level list; then, take any item of this list (between the <li> and </li> tags), and add a nested list inside of it. Please make sure to close all tags properly.

Such code is correct:
<ul> 
  <li>1
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li> 
  <li>2</li>
</ul>
But such code is erroneous:
<ul> 
  <li>1</li>
  <ul>
    <li>1.1</li>
    <li>1.2</li>
  </ul> 
  <li>2</li> 
</ul>

In the erroneous code, the nested list has been inserted not within the upper-list item, but in-between the items, which is unacceptable.

You can have an unlimited number of levels in your list. Moreover, you can use both ordered and unordered lists in your multi-level list.

In this task, you will practice with multi-level lists.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Multi Level List</title> </head> <body> <h1>Course Sections</h1> <ol> <li> Heading Tags <ol> <li>h1</li> <li>h2</li> <!-- Add items of your nested list for the first goal here --> </ol> </li> <li> List Tags <!-- Add a nested list for the first goal here --> </li> <li>Form Tags</li> </ol> </body> </html>
CSS
HTML Academy
  1. Add two more items to the nested "Heading Tags" list.
  2. Within the "List Tags" item, add an unordered nested list of two items.
Theory Check Next