Nested Lists or Nesting Lists in HTML

Nested Lists in HTML: Nested lists are a way to present complex data in HTML without the use of tables. Let us say that we wish to present the following information in lists:

In order to present the above information on an HTML page, we need to do the below:

Step 1: Create an unordered list with two empty <li></li> i.e. list items for any list style:

<ul>

<li> Our First Nested List </li>

<li>Our Second Nested List</li>

</ul>

Step 2: We have created our first list, now the nesting begins. Create another list within that <li></li> tags. We shall first create an ordered list with default numbers. So our first nested list should be an ordered list. The below code is for our first nested list:

<li>           <li>UAE</li>           <li>Japan</li>           <li>KSA</li>

Our second Nested list would be placed as an unordered list within <li></li> tags after the first one. The HTML code for nested list would be something like this:

 

<li> <ol>           <li>USA</li>           <li>Russia</li>           <li>Germany</li>

We can place as many lists within the list item of one HTML list that we want. Though the tricky partr remains with the styling of elements and data within these lists and nested lists.

 

The final code for a nested list would look something like this:

<h1>Nested Lists or Nesting Lists in HTML</h1>       <h2>Top Countries in the World</h2>         <h3>Rich :(Our First Nested List)</h3>         <h3>Powerful: (Our 2nd Nested List)</h3>           <li>USA</li>           <li>Russia</li>           <li>Germany</li>

Result:

This is just the beginning because we can add as many nested lists as we need. Note: the look and controls remain with our design and CSS coding.

 

Understanding the Nested lists order and placement of Nesting: