03 HTML - List Tag

In this article we will take a look on Lists Tag:

There are 3 types of list available in HTML.

1. Unordered list
2. Ordered list
3. Definition list

1. Unordered List:

If we want to display the list in dotted format we can use unordered list. The syntax will be: <ul></ul>. Now if we want to add an item in this list we use <li></li> tag.

Syntax:

<ul>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

Now if we want to change the dots type we can use type attribute inside our ul tag.

There are 4 types available in ul tag. (disc, circle, square, none)

Syntax:

<ul type="disc">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

<ul type="circle">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

<ul type="square">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

<ul type="none">

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ul>

The 'none' value is used to remove the dots from our list.

2. Ordered List:

If we want to display the list in numbered format we can use ordered list. The syntax will be: <ol></ol>. Now if we want to add an item in this list we use <li></li> tag.

Syntax:

<ol>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

</ol>

3. Definition List:

If we want to display the list in defined format we can use definition list. The syntax will be: <dl></dl>. Now if we want to add an item in this list we use this below syntax.

Syntax:

<dl>

    <dt>Definition Term</dt>

    <dd>List Description</dd>

</dl>

The above syntax will render only one list item.

Full Tutorial: