HTML <ol> type Attribute
Last Updated :
12 Mar, 2024
HTML <ol> type attribute specifies the numbering style for ordered lists. It can be set to “1” for numerical, “A” for uppercase alphabetical, “a” for lowercase alphabetical, “I” for uppercase Roman numerals, or “i” for lowercase Roman numerals.
Syntax:Â
<ol type="1 | a | A | i | I">
Attribute Values:
Value
| Description
|
---|
1
| This is the default value. It defines the list items in decimal number.(1, 2, 3, 4 .).
|
---|
a
| It defines the list items in alphabetically ordered lowercase letters .(a, b, c, d …)
|
---|
A
| It defines the list items in alphabetically ordered uppercase letters.(A, B, C, D ..)
|
---|
i
| It defines the list items in lowercase roman number order.(i, ii, iii, iv, v, vi …)
|
---|
I
| It defines the list items in uppercase roman number order.(I, II, III, IV, V, VI ..)
|
---|
HTML <ol> type attribute Examples
Example 1:Â In this example we defines an ordered list (<ol>) with the type=”1″ attribute, specifying numbering style as decimal. It lists HTML, CSS, and JS. The page also displays a title and a heading.
HTML<!DOCTYPE html>
<html>
<head>
<title>HTML ol type attribute</title>
</head>
<body>
<p>Type attribute</p>
<p>start attribute</p>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
Output:
HTML ol type attribute
Example 2: In this example we demonstrates various list types using the <ol> element’s type attribute: decimal numbering (1, 2, 3), alphabetical (a, b, c), uppercase alphabetical (A, B, C), lowercase Roman numerals (i, ii, iii), and uppercase Roman numerals (I, II, III).
HTML<!DOCTYPE html>
<html>
<head>
<title>HTML ol type Attribute Example</title>
</head>
<body>
<h1>Ordered List Examples</h1>
<h3>Decimal Numbering (Default)</h3>
<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>Alphabetical (Lowercase)</h3>
<ol type="a">
<li>Item a</li>
<li>Item b</li>
<li>Item c</li>
</ol>
<h3>Alphabetical (Uppercase)</h3>
<ol type="A">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
<h3>Roman Numerals (Lowercase)</h3>
<ol type="i">
<li>Item i</li>
<li>Item ii</li>
<li>Item iii</li>
</ol>
<h3>Roman Numerals (Uppercase)</h3>
<ol type="I">
<li>Item I</li>
<li>Item II</li>
<li>Item III</li>
</ol>
</body>
</html>
Output:
Supported Browsers
The browser supported by ol type attribute listed below:
Share your thoughts in the comments
Please Login to comment...