Types of Lists in HTML

Raju Sheoran

As we have discussed in previous tutorials that firstly you have to create an "index.html" file and then you have to copy the given source code to see the results in the web browser.

Now let's see what are Lists in HTML. And the different types of lists:

What are Lists in HTML?

Lists are used to group the items in a list.

There are mainly three types of lists in HTML.

In HTML lists are: Ordered List, Unordered List, and Description Lists

List items are created using <li> tag.

1). Ordered List in HTML

Ordered Lists are created using <ol> tag.

This type of list shows the data and information in the given order.

Types of the ordered list are: 1, A, a, I, i

<ol type="A">
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ol>

( Try to use 1, a, I, and i at the place of A in <ol type="A"> )

Output:

A. HTML Simplified

B. CSS Master

C. JavaScript Simplified

2). Unordered List in HTML

Unordered Lists are created using <ul> tag.

This type of list represents the data without any specific order.

Types of ordered lists are disc, circle, square, and none.

<ul type="circle">
    <li> HTML Simplified </li>
    <li> CSS Master </li>
    <li> JavaScript Simplified </li>
</ul>

( Try to use disc, circle, square, and none to change the type of unordered list.)

Output:

HTML Simplified
CSS Master
JavaScript Simplified

3). Description List in HTML

It is used to represent elements in definition form like a dictionary.

<dl> tag defines the description list, <dt> tag defines the term, and the <dd> tag describes each term in

<dl>
    <dt> HTML Simplified </dt>
        <dd> This is complete series of HTML </dd>
    <dt> CSS Master </dt>
        <dd> This will help you to master CSS </dd>
</dl>

Output:

HTML Simplified

This is complete series of HTML

CSS Master

This will help you to master CSS