HTML Lists - Numbered Lists & Lists with Letters
How to make HTML numbered list in HTML webpage?
Sometime we need to list the items in webpage. So before I have explained in previous page about lists. That was unordered list. Now I am going to explain how to use the numbers instead of discs and circles. See below example for that
<ol type="1">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
If you use above code, the output will be
1)United States
2)United Kingdom
3)India
Lists with Letters example:
<ol type="A">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
If you use above code, the output will be
A)United States
B)United Kingdom
C)India
<ol type="a">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
If you use above code, the output will be
a)United States
b)United Kingdom
c)India
For roman numbers - lower case:
<ol type="i">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
i)United States
ii)United Kingdom
iii)India
For roman numbers - Upper case:
<ol type="I">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
I)United States
II)United Kingdom
III)India
Put together in one page code :
<!DOCTYPE html>
<html>
<body>
<h2>Numbered List</h2>
<ol type="1">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<h2>List with Letters</h2>
<ol type="A">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<h2>List with small Letters</h2>
<ol type="a">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<h2>List with Roman Uppercase</h2>
<ol type="I">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<h2>List with Roman Lowercase</h2>
<ol type="i">
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
<li>United States</li>
<li>United Kingdom</li>
<li>India</li>
</ol>
</body>
</html>
Output of the above code:
Please practice in your computer for above examples. Will see in next page. Thank you have a nice day!
No comments:
Post a Comment