Scribd
Upload
11 views

HTML Nested List Programs

The document discusses different ways to nest lists in HTML, including nesting ordered lists within unordered lists and vice versa. It also covers attributes like start and reversed that can be used to customize the numbering or order of list items.

Uploaded by

ghanshyamsinghandal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML Nested List Programs

The document discusses different ways to nest lists in HTML, including nesting ordered lists within unordered lists and vice versa. It also covers attributes like start and reversed that can be used to customize the numbering or order of list items.

Uploaded by

ghanshyamsinghandal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

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>

You might also like