Html ordered list example

In this tutorial you will learn how to create an ordered list with number, some people call it numbered list also, in this type of list each item come with a sequence number, you also learn HTML description lists.

<ol> <li>Item 1</li> </ol>

Order List in HTML Page

Ordered list is very useful element in html designing, whenever you have a list of item to be displayed in order use <OL> element. here we see some html ol tag or ordered list example

HTML Tutorial
Css Tutorial
Jquery Tutorial
Asp.Net MVC Tutorial
Ado.Net Tutorial

Here is code for above order list

<ol>
<li>HTML Tutorial </li>
<li>Css Tutorial </li>
<li>Jquery Tutorial </li>
<li>Asp.Net MVC Tutorial </li>
<li>Ado.Net Tutorial </li>
</ol>

List tag is used when we want to display a list of items on web page, there are different ways we can specify lists of information, here you learn three types of List tags in html.

<ul> <li>Item 1</li> </ul>

List, UL, LI tags in HTML

UL, LI tag <ul> </ul> is used when we want to display something in a list

This is how your List, UL, LI tag may look like.

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>

Output here:

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Html ordered list ABC

Html ordered list abc example, Ordered List with type=A

HTML Tutorial
Css Tutorial
Jquery Tutorial
Asp.Net MVC Tutorial
Ado.Net Tutorial

Here is code for above order list type=A

<ol type="A">
<li>HTML Tutorial </li>
<li>Css Tutorial </li>
<li>Jquery Tutorial </li>
<li>Asp.Net MVC Tutorial </li>
<li>Ado.Net Tutorial </li>
</ol>

Ordered List with type=I

HTML Tutorial
Css Tutorial
Jquery Tutorial
Asp.Net MVC Tutorial
Ado.Net Tutorial

Here is code for above order list type="I"

<ol type="I">
<li>HTML Tutorial </li>
<li>Css Tutorial </li>
<li>Jquery Tutorial </li>
<li>Asp.Net MVC Tutorial </li>
<li>Ado.Net Tutorial </li>
</ol>

HTML Description Lists

In description list, we can add description for each item.

The description list is created with <dl> element. inside <dl> element we can have <dt> element and <dd> element. Let’s look at the example below.

Example:

Asp .net: .Net is a web application development framework by Microsoft.
JavaScript: JavaScript is client-side programming language.

<dl style="margin-left:50px;">
    <dt>Asp.net</dt>
    <dd>.Net is a web application development framework </dd>
    <dt>JavaScript</dt>
    <dd>JavaScript is client-side programming language.</dd>
</dl>

You may be interested to read following posts: