Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For
example,
<ul>
<li>
Coffee
<ul>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ul>
</li>
<li>
Tea
<ul>
<li>Milk Tea</li>
<li>Black Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered List inside Unordered List
Similarly, we can also mix list types while nesting and add ordered lists inside
the unordered list. For example,
<ul>
<li>
Coffee
<ol>
<li>Cappuccino</li>
<li>Americano</li>
<li>Espresso</li>
</ol>
</li>
<li>
Tea
<ol>
<li>Milk Tea</li>
<li>Black Tea</li>
</ol>
</li>
<li>Milk</li>
</ul>
HTML Ordered List
We use the HTML ordered list to define a list where the sequence or order of
the list items is important. We can use the HTML ordered list for recipes,
algorithms, top ten lists, and so on.
We use the <ol> tag to create an unordered list. For example,
<ol>
<li>Name</li>
<li>Address</li>
<li>Phone Number</li>
</ol>
start Attribute
We use the start attribute to change the starting point for the numbering of the
list. For example,
<ol start='5'>
<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>
This attribute also works with other types. For example,
<ol type="a" start='5'>
<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>
reversed Attribute
We can use the reversed attribute on the ordered list to reverse the
numbering on the list. For example,
<ol reversed>
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>
Similarly, the reversed attribute can also be used with other types and in
conjunction with the start attribute. For example,
<ol reversed type="I" start="10">
<li>Cat</li>
<li>Dog</li>
<li>Elephant</li>
<li>Fish</li>
</ol>
Nesting Lists
In HTML, we can create a nested list by adding one list inside another. For
example,
<ol type="I">
<li>
Chapter 1
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
</ol>
</li>
<li>
Chapter 2
<ol type="a">
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
</ol>
</li>
<li>
Chapter 3
<ol type="a">
<li>Lesson 1</li>
</ol>
</li>
</ol>
Similarly, we can also mix list types while nesting and add an unordered list
inside the ordered list. For example,
<ol>
<li>
Prepare the ingredients.
<ul>
<li>Eggs</li>
<li>Salt</li>
<li>Butter</li>
</ul>
</li>
<li>
Mix the ingredients and cook on a low flame.
</li>
<li>
Serve hot with garnish. You can use
<ul>
<li>Chives</li>
<li>Bacon</li>
<li>Coriander</li>
</ul>
</li>
</ol>
