HTML Ordered List - Learn php Online Free

HTML Ordered List | HTML Numbered List

HTML\’s Numbered List or Ordered List shows items with numbers. The HTML ol tag is used for a list that is in order. We can use an ordered list to show things in numerical order, alphabetical order, or any other way that puts the focus on the order. There are different ways to make a list with numbers:

Numeric Number (1, 2, 3) (1, 2, 3)
Capital Roman Number (I II III)
Lower Roman Numerals (i ii iii)
Capital Alphabet (A B C)
Lower Alphabet (a b c)

There are 5 types of attributes in the ol> tag that can be used to show different kinds of ordered lists.

Type \”1\”

This type is the default. In this type, each item on the list is given a number.

Type \”I\”

In this type, the list items are given roman numbers that start with a capital letter.

Type \”i\”

Roman numbers in lowercase are used to number the items in this type of list.

Type \”A\”

In this kind of list, the items are numbered using capital letters.

Type \”a\”

In this kind of list, the items are numbered with small letters.

HTML Example of an Ordered List

HTML Ordered List Example

<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>

Output

Red
Blue
Green
Orange

ol type=\”I\” List Example

<ol type=\”I\”>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>

Output

$\"Ordered$

ol type=\”i\” List Example

<ol type=\”i\”>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>

Output

$\"type$

ol type=\”A\” List Example

<ol type=\”A\”>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>

Output

$\"ordered$

ol type=\”a\” List Example

<ol type=\”a\”>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>

Output

$\"ordered$

start attribute

The start attribute is used with the ol tag to tell where the list items should begin.

<ol type=\”1\” start=\”10\”>: It will show numbers starting with the number \”10\”.

ol start=\”10\” type=\”A\”>: It will show all the capital letters that begin with \”J.\”

ol start=\”10\” type=\”a\”>: It will show all the lowercase letters that start with \”j.\”

<ol type=\”I\” start=\”10\”>: It will show Roman capital letters beginning with \”X.\”

Example

<!DOCTYPE html>
<html>
<body>
<ol type=\”I\” start=\”10\”>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>
</body>
</html>

Output

$\"list$

reversed Attribute:

This is a new Boolean attribute in the HTML5 version of the ol> tag. If you use the attribute reversed with

tag, it will number the list from the top down (7, 6, 5, 4……1).

Example

<!DOCTYPE html>
<html>
<body><h2>Reversed Attribute Example :</h2>
<ol type=\”A\” start=\”10\” reversed>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
<li>Orange</li>
</ol>
</body>
</html>

Output

. $\"reserved$