HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:
- Numeric Number (1, 2, 3)
- Capital Roman Number (I II III)
- Small Romal Number (i ii iii)
- Capital Alphabet (A B C)
- Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol>
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Output
Let's see the example to display list in roman number uppercase.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol type="I">
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Let's see the example to display list in roman number lowercase.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol type="i">
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Output
Let's see the example to display list in alphabet uppercase.
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol type="A">
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Output
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol type="i" start="5">
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Output
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use the reversed attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1).
Example
<!DOCTYPE html>
<html>
<title>HTML Tutorials</title>
<body>
<ol reversed>
<li>Computer Fundamental</li>
<li>C Programming</li>
<li>C++ Programming</li>
<li>Python Programming</li>
</ol>
</body>
</html>
Output
No comments:
Post a Comment