Open In App

HTML <ol> type Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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

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:

ol type attribute example

Supported Browsers

The browser supported by ol type attribute listed below:


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads