Advertisement

Advertisement


Ordered Lists

This list is created by using <ol> tag. Any series can be used to order the elements, like series of digits, alphabets, roman numerals, etc. All these series gets increased by one with every new element entered in the list.

Ex.-For a numbered order list, the numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Have a look at the example below to understand the concept properly.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List
  1. Audi
  2. Mercedes
  3. Lamborghini

Ordered list Type Attribute

The type attribute is used to change the series type.

Value 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

Numbers as type - <ol type="1">. Here the numbers will be used to order the elements. Each new element will get incremented value from the previous one in the list.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List
  1. Audi
  2. Mercedes
  3. Lamborghini

Uppercase

Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to order the elements.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List Uppercase
  1. Audi
  2. Mercedes
  3. Lamborghini

Lowercase

Lowercase alphabets as type - <ol type="a">. Same as above, but the alphabets will be lowercased.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase </title>
</head>
<body>
<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List Lowercase Example
  1. Audi
  2. Mercedes
  3. Lamborghini

Uppercase Roman Numbers

Uppercase roman numbers as type <ol type="I">.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase Roman </title>
</head>
<body>
<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List Uppercase Roman
  1. Audi
  2. Mercedes
  3. Lamborghini

Lowercase Roman Numbers

Lowercase roman numbers as type <ol type="i">


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase Roman </title>
</head>
<body>
<ol type="i">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>

Output

HTML Ordered List Lowercase Roman
  1. Audi
  2. Mercedes
  3. Lamborghini

The "Start" Attribute

The start attribute is used to control the counting in the list. By default, the counting starts from '1' or from 'a', but we can change counting to start from a specified number or alphabet. Look at the example below to see the syntax of using this attribute.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Ordered List Start Attribute </title>
</head>
<body>
<ol start="50">
<li>Samsung</li>
<li>OnePlus</li>
<li>Nokia</li>
</ol>
<ol type="I" start="50">
<li>Oppo</li>
<li>Vivo</li>
<li>Xiaomi</li>
</ol>
</body>
</html>

Output

Ordered List Start Attribute
  1. Samsung
  2. OnePlus
  3. Nokia
  1. Oppo
  2. Vivo
  3. Xiaomi

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<ol>
Yes
Yes
Yes
Yes
Yes









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.