Introduction:

In this article we will learn what is ol tag in html or how to display ordered List or numbered List in html with example.

Description:

The HTML ol tag is used for ordered list. It is display the elements in numbered List format.  There can be different types of numbered list:

1. Numeric Number (1, 2, 3)

2. Capital Roman Number (I II III)

3. Small Romal Number (i ii iii)

4. Capital Alphabet (A B C)

5. Small Alphabet (a b c)

 

There are 5 types of attributes in <ol> tag that is used To represent different ordered lists.

HTML Ordered List Example

Let's see the example of HTML ordered list. Here we are not defining type="1" because it is the default type.

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol>
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html> 

Output:

1.     ASP.NET

2.     MVC

3.     JavaScript

4.     jQuery

5.     SQL SERVER

ol type="I"

Let's see the example to display list in roman number uppercase.

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol type="I">
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html>

Output:

       I.            ASP.NET

    II.            MVC

 III.            JavaScript

IV.            jQuery

   V.            SQL SERVER

 

ol type="i"

Let's see the example to display list in roman number lowercase.

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol type="i">
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html> 

Output:

       i.            ASP.NET

     ii.            MVC

  iii.            JavaScript

   iv.            jQuery

     v.            SQL SERVER

ol type="A"

Let's see the example to display list in alphabet uppercase.

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol type="A">
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html>

Output:

A.   ASP.NET

B.    MVC

C.    JavaScript

D.   jQuery

E.    SQL SERVER

 

ol type="a"

Let's see the example to display list in alphabet lowercase.

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol type="a">
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html> 

OutPut:

a.      ASP.NET

b.     MVC

c.      JavaScript

d.     jQuery

e.      SQL SERVER


start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="2"> : It will show numeric values starting with "2".

<ol type="A" start="2"> : It will show capital alphabets starting with "B".

<ol type="a" start="2"> : It will show lower case alphabets starting with "b".

<ol type="I" start="2"> : It will show Roman upper case value starting with "II".

<ol type="i" start="2"> : It will show Roman lower case value starting with "ii".

<!DOCTYPE>
<html>
<head>
    <title>Example of Lists</title>
</head>
<body>
    <ol type="a" start="2">
        <li>ASP.NET</li>
        <li>MVC</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>SQL SERVER</li>
    </ol>
</body>
</html>

Output:

b.     ASP.NET

c.      MVC

d.     JavaScript

e.      jQuery

f.       SQL SERVER

 

 

I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like