HTML List Types

Updated on December 8, 2022 by Muhammad Zeeshan

Share:

In this tutorial, you will see the HTML list types with their explanations, syntax, code examples, and uses. So let’s begin.

In short, there are only three HTML list types:

1. Ordered List
2. Unordered List
3. Description List

All of these have different characteristics and uses in HTML. Let’s further explore each HTML list type one by one and see the difference.

1# HTML Ordered List

This HTML list type is used to define numbered lists. To specify Ordered lists in HTML, we use a pair of <ol> and <li> tags. The <ol> tag defines an ordered list while the <li> tag defines each list item. All list items are marked with numbers.

The following example shows the syntax to define an ordered list in HTML.

<ol>
    <li> Earth </li>
    <li> Moon </li>
    <li> Mercury </li>
    <li> Mars </li>
    <li> Jupiter </li>
</ol>

Code Output:

You can see HTML Ordered Lists tutorial to learn more about it.

2# HTML Unordered List

The unordered list defines a list with bullet points. This HTML list type uses bullet points instead of numbers. We use a pair of <ul> and <li> tags to specify an unordered list in HTML.

The following example shows the syntax to define an unordered list in HTML.

<ul>
    <li> Earth </li>
    <li> Moon </li>
    <li> Mercury </li>
    <li> Mars </li>
    <li> Jupiter </li>
</ul>

Code Output:

The only difference between these two HTML list types is the starting tags. <ul> stands for unordered list while <ol> stands for ordered list.

You can learn more about it in our HTML Unordered Lists tutorial in detail.

You can also remove bullet points from the lists. To do this, check this guide to make an unordered list without bullets in HTML.

3# Description List

This HTML list type is different from the previous ones. A description list is used to specify terms with their descriptions.

We use a pair of <dl> tags to define an HTML description list. A pair of <dt> tags for the term name and <dd> tags for the term description.

The following HTML syntax example shows how to specify a description list in HTML.

<dl>
    <dt> Earth: </dt>
    <dd> 
        Earth is an ellipsoid with a circumference of about 40,000 km. 
        It is the densest planet in the Solar System. 
    </dd>
 
    <br>
 
    <dt> Moon: </dt>
    <dd>
        The Moon is Earth's only natural satellite. 
        It is the fifth largest satellite in the Solar System and the largest.
    </dd>
 </dl>

Here in the above code, I used a <br> tag to create a line break.

Code Output:

Tip: With the help of CSS, you can use images or icons instead of bullets or numbers as list markers. To do this, check the CSS list-style-image property.

That’s all. Now, you know all the HTML list types. If you have any questions related to this tutorial, then simply leave a comment below.

Topic: HTML

About The Author

Muhammad Zeeshan

Hi everyone, I'm a Full Stack Web Developer and Technical Writer. I just love to share my knowledge to help others in this community. I mostly write about HTML, CSS, JS, MySQL, and PHP.