What is an Ordered List in HTML ?
It is a collection of related items which are ordered/listed in sequence.
Ordered List will display items in particular order based upon the type.
What are the attributes in <ol> tag ?
There are 7 types of attributes in <ol> tag.
1. type=”1″
List items will be numbered with numbers, this is default behaviour.
2. type=”A”
List items will be numbered with uppercase letters.
3. type=”a”
List items will be numbered with lowercase letters.
4. type=”I”
List items will be numbered with uppercase roman numbers.
5. type=”i”
List items will be numbered with lowercase roman numbers.
6. start
List items will be numbered with specified start index.
7. reversed
List items will be numbered in reversed order.
Web design coding in html !!!
Click to Learn More about – HTML Tutorial for beginners
1. Simple Ordered list
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ol>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
2. Nested Ordered list
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ol>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<ol>
<li>Red</li>
<li>Blue</li>
<ol>
<li>Tiger</li>
<li>Dog</li>
<li>Cat</li>
<li>Elephant</li>
</ol>
<li>Green</li>
<li>Orange</li>
</ol>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
3. Ordered list with inline style.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
</head>
<body>
<ol style="color:red">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
4. Ordered list with class
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
.ol1{
color:blue;
}
</style>
</head>
<body>
<ol class="ol1">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
5. Ordered list with id
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:green;
}
</style>
</head>
<body>
<ol id="ol1">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
6. Ordered list with type=”1″.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:brown;
}
</style>
</head>
<body>
<ol id="ol1" type="1">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
7. Ordered list with type=”A”
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:brown;
}
</style>
</head>
<body>
<ol id="ol1" type="A">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
HTML learning websites !!!
Click to Learn More about – HTML Tutorial for beginners
8. Ordered list with type=”a”
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:brown;
}
</style>
</head>
<body>
<ol id="ol1" type="a">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
9. Ordered list with type=”I”
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:brown;
}
</style>
</head>
<body>
<ol id="ol1" type="I">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
10. Ordered list with type=”i”
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:brown;
}
</style>
</head>
<body>
<ol id="ol1" type="i">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
11. Ordered list with start.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:blue;
}
</style>
</head>
<body>
<ol id="ol1" type="i" start="3">
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
12. Ordered list with reversed.
Example :
<!DOCTYPE html>
<html>
<head>
<title>List tag</title>
<style>
#ol1{
color:blue;
}
</style>
</head>
<body>
<ol id="ol1" type="1" reversed>
<li>MKGandhi</li>
<li>AbdulKalaam</li>
<li>Tendulkar</li>
<li>RahulDravid</li>
</ol>
</body>
</html>
Output :
