The HTML Ordered list displays the elements in a numbered format. The <ol> tag is for an ordered list, an ordered list can be numerical or alphabetical.
Inside the <ol> tag you have to make a list <li> of items that will follow the order.
Syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
HTML Ordered List Type Attribute
| This will list the items with numbers (default) |
| This will list the items in uppercase letters. |
| This will list the items in lowercase letters. |
| This will list the items with uppercase Roman numbers. |
| This will list the items with lowercase Roman numbers. |
Below are a few examples that demonstrate the use of <ol> tag in HTML.
Example 1: This example shows the default type of ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol>
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 2: This example shows the type=”A” of ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol type="A">
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 3: This example shows the type=”a” of ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol type="a">
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 4: This example shows the type=”I” of ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol type="I">
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 5: This example shows the type”i” of ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol type="i">
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 6: This example shows the use of the start attribute in ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<ol start=5>
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ol>
</body>
</html>
|
Output:
Example 7: This example shows the nested lists in ordered lists.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML ol tag</title>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>
<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>
<ol start=5>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>Type attribute</p>
<ol Type="A">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
|
Output:
Learn to code easily with our course
Coding for Everyone. This course is accessible and designed for everyone, even if you're new to coding. Start today and join millions on a journey to improve your skills!Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
02 Aug, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...
