---
title: "Difference between Ordered and Unordered list in HTML"  
description: "Difference between Ordered and Unordered list in HTML"  
author: "Anonymous User"  
published: 2021-07-20  
updated: 2021-07-20  
canonical: https://www.mindstick.com/forum/156534/difference-between-ordered-and-unordered-list-in-html  
category: "html5"  
tags: ["html", "html5", "list"]  
reading_time: 4 minutes  

---

# Difference between Ordered and Unordered list in HTML

What is the [difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) between Ordered and Unordered list in [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript)?

## Replies

### Reply by Anonymous User

HTML lists are used to present list of the information in a proper list form. Basically, there are three different types of list in HTML and each one has a specific purpose and meaning.

- Unordered list — Used to create a list of related items with no particular order.
- Ordered list — Used to create a list of related items with a specific order.
- Description list — Used to create a list of terms and their descriptions.

The main difference between Ordered and Unordered list are to display an element with ordered list like, 1,2,3 or a,b,c whereas for display an element of ordered list indicates with Circle, square, disc etc.

Here is an example of Ordered and Unordered list for better understanding :

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>List | Mindstick</title>
    <style>
        body {
            margin-left: 30%;
            margin-right: 30%
        }
        .d-flex {
            display: flex;
        }
        .justify-content-center {
            justify-content: center;
        }
        .flex-row {
            flex-direction: row;
        }
        .flex-column {
            flex-direction: column;
        }
        .mb-0 {
            margin-bottom: 0px !important;
        }
        .w-100 {
            width: 100%
        }
        .m-1 {
            margin: 10px;
        }
        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class='d-flex justify-content-center flex-column'>
        <h1>Unordered List</h1>
        <ul type='square'>
            <li>Core PHP</li>
            <li>Codeigniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <ul type='circle'>
            <li>Core PHP</li>
            <li>Codeigniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <ul type='disc'>
            <li>Core PHP</li>
            <li>Codeigniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <h1>Ordered List</h1>
        <ol type='I'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='i'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='a'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='A'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
    </div>
</body>
</html>
```

Hope this information will be helpful for you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156534/difference-between-ordered-and-unordered-list-in-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
