Ordered List
- Ordered lists are used to group the set of related items with numbers.
- In the order list, all the items are marked with a number by default so it is also called a numbered list
- it starts with <ol> tag, and list items start with <li> tag.
Syntax:
<ol>
<li>line1</li>
<li>Line2</li>
<li>Line3</li>
</ol>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h3>Ordered list example</h3>
<ol>
<li>Cat</li>
<li>Dog</li>
<li>Cow</li>
</ol>
</body>
</html>
Output:
The type attribute in the Ordered List
Type | Description |
---|---|
type="1" | The list items will be numbered with numbers (default) |
type="A" | The list items will be numbered with uppercase letters |
type="a" | The list items will be numbered with lowercase letters |
type="I" | The list items will be numbered with uppercase roman numbers |
type="i" | The list items will be numbered with lowercase roman numbers |
Numbers
- The type="1" attribute specifies that the list items will be numbered with numbers by default.
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h3>Ordered list example</h3>
<ol type="1">
<li>Cat</li>
<li>Dog</li>
<li>Cow</li>
</ol>
</body>
</html>
Output:
Lower Case Roman Number
- The type="i" attribute specifies that the list items will be numbered with a lowercase roman number.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h3>Ordered list example</h3>
<ol type="i">
<li>Cat</li>
<li>Dog</li>
<li>Cow</li>
</ol>
</body>
</html>
Output:
Upper Case Alphabets
- The type="A" attribute specifies that the list items will be numbered with an uppercase alphabet.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h3>Ordered list example</h3>
<ol type="A">
<li>Cat</li>
<li>Dog</li>
<li>Cow</li>
</ol>
</body>
</html>
Output:
Lower Case Alphabets
- The type="a" attribute specifies that the list items will be numbered with a lowercase alphabet.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<h3>Ordered list example</h3>
<ol type="a">
<li>Cat</li>
<li>Dog</li>
<li>Cow</li>
</ol>
</body>
</html>
Output: