forum

Home / DeveloperSection / Forums / Difference between Ordered and Unordered list in HTML

Ask Question

Difference between Ordered and Unordered list in HTML

Anonymous User 3050 20-Jul-2021

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

html5 html  html5  list 
Updated on 20-Jul-2021
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

04-Aug-2021

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!

Liked By