left-sidebar
Table Of Content(toc)

An ordered list is defined by the HTML
<ol> tag. A list that is arranged can
be alphabetical or numerical.

Ordered Lists in HTML

The <ol> tag indicates that the
list is ordered. The <li> tag
appears at the top of each list item.
The list elements will by default have numbers next to them:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Ordered HTML List</h2>

    <ol>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>

HTML List in Order – The Type Attribute

The type of the list item marker is specified by the type attribute of the
<ol> tag:
Type Description
type=”1″ The things on the list will be numbered (default)
type=”A” The list items’ numbers will be in uppercase letters.
type=”a” Lowercase letters will be used for the list’s item numbers.
type=”I” The list’s entries will be given roman numbers in uppercase.
type=”i” The list items’ numbers shall be roman numbers in lowercase.


Example : Numbered

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Numbered Ordered List</h2>

    <ol type=“1”>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>


Example : Uppercase Letter

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Uppercase Letter-based List in Order</h2>

    <ol type=“A”>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>

MR STAR EDIT


Example : Lowercase Letter

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Lowercase Letter-based List in Order</h2>

    <ol type=“a”>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>


Example : Uppercase Roman Number

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Uppercase Roman Numbers-based List in Order</h2>

    <ol type=“I”>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>


Example : Lowercase Roman Number

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>Ordered Lists in HTML</title>
</head>
<body>

    <h2>Lowercase Roman Numbers-based List in Order</h2>

    <ol type=“i”>
        <li>Milk</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ol>  

</body>

</html>

MR STAR CREATOR
Rate this post

Categorized in: