Scribd
Upload
2 views

HTML Ordered List

The document explains how to create HTML ordered lists using the <ol> tag, emphasizing the importance of item sequence. It covers attributes like 'start' to change the starting number and 'reversed' to reverse the order of numbering. Additionally, it describes how to create nested lists by placing one list inside another, allowing for mixed list types.

Uploaded by

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

HTML Ordered List

The document explains how to create HTML ordered lists using the <ol> tag, emphasizing the importance of item sequence. It covers attributes like 'start' to change the starting number and 'reversed' to reverse the order of numbering. Additionally, it describes how to create nested lists by placing one list inside another, allowing for mixed list types.

Uploaded by

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

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>

Browser Output

Each item of the list is enclosed inside the <li> tag and they are numbered by
decimal numbers.
By default, ordered lists are ordered by numbers, however, we can change
them as per our choice.
Ordered Lists

Type

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>

Browser Output

Here, we change the starting value of the list to 5.

This attribute also works with other types. For example,

<ol type="a" start='5'>


<li>Harry</li>
<li>Ron</li>
<li>Sam</li>
</ol>

Browser Output
Similarly, we can use the start attribute along with all other types.

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>

Browser Output
Here, we can see the order of the list is reversed, the first list item is
numbered 4 and the last is numbered 1.

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>

Browser Output

In the above example, we use the upper-case roman numeral type and start
at 10 and reverse the order of the numbers.

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>

Browser Output
In the above example, you can see we have added an ordered list inside another ordered list.

In this case, the list item of the outer ordered list also includes an ordered list.

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>

Browser Output

You might also like