HTML <ol> type Attribute

The HTML <ol> type attribute specifies the kind of marker to use in the list (letters or numbers). This attribute allows customization of ordered list markers, offering options like decimal numbers, uppercase or lowercase letters, and uppercase or lowercase Roman numerals, tailoring the list appearance to specific needs.

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 numbers.(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:



Contact Us