Nested list

Lists can be nested, meaning one list can be placed inside of another. A nested list, for example, can be used to create an outline. The following shows an example of a nested list:

  • HTML
    1. Meta tags
    2. anchor tag
  • ASP
    • Arithmetic operators
    • Relational oeprators
  • JavaScript

In this nested list, we have total of three lists. The main list starts with "HTML". The second list, the first nested list, starts with "Meta tags". The third list, the second nested list, starts with "Arithmetic operators". The main list ends with "JavaScript."

To create that nested list, start by creating each seperate list. First, create the main list:

<ul>
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ul>

Now, create the second list:

<ol>
<li>Meta tags</li>
<li>anchor tag</li>
</ol>

Finally, create the third list:

<ul>
<li>Arithmetic operators</li>
<li>Relational oeprators</li>
</ul>

Now, we have created all three lists. Next, place each of the nested list in the main list item. For example, place the second list in the first list item, <li>HTML</li>, of the main list:

<ul>
<li>HTML
<ol>
<li>Meta tags</li>
<li>anchor tag</li>
</ol>
</li>
<li>ASP</li>
<li>JavaScript</li>
</ul>

That will result in:

  • HTML
    1. Meta tags
    2. anchor tag
  • ASP
  • JavaScript

Finally, place the second nested list in second item, <li>ASP</li>, of the main list:

<ul>
<li>HTML
<ol>
<li>Meta tags</li>
<li>anchor tag</li>
</ol>
</li>
<li>ASP
<ul>
<li>Arithmetic operators</li>
<li>Relational oeprators</li>
</ul>

</li>
<li>JavaScript</li>
</ul>