Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / difference between ordered and unordered list in html
Ask Question
Anonymous User
Anonymous User

Software Developer Trainee

I am a content writter !

Message

1 Answers

Anonymous User
Anonymous User 04 Aug 2021
Report Abuse

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!

advertising