Ask Question

Difference between Ordered and Unordered list in HTML

What is the difference between Ordered and Unordered list in HTML?

Last updated:7/20/2021 12:44:56 AM

HTML5

HTML HTML5 list

1 Answers

Ethan Karla

21-Jul-2021

HTML lists are used to present list of information in well formed and semantic way. 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, in no particular order.

Ordered list — Used to create a list of related items, in 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!

report abuse

Difference between Ordered and Unordered list in HTML

1 Answers

Ethan Karla

Answer

Login