Home » HTML List

HTML List

HTML lists elements are used to display a list of items. You can display a to-do list, a grocery list, any kind of lists that contain textual information. Image lists are also possible, but that is something you will learn in CSS tutorial.

Lists are of two types

  1. Ordered Lists
  2. Unordered Lists

Ordered Lists

In this type of lists, the list items are ordered using numbers starting from 1 by default. But, you can specify other types of numeric symbols as well.

  • Lower Alphabets
  • Upper Alphabets
  • Lower Roman
  • Upper Roman

We shall see examples of each one of them. Create an HTML page called example-ordered-list.html and add the following code.

<!DOCTYPE html>


<html>

    <head> 

        <title>Ordered List Example</title>

    </head>

    <body>
 
        <h1>Ordered List Types</h1>

        <p> Default </p>

    <ol>

        <li>Orange</li>
        <li>Mango</li>

        <li>Banana</li>

        <li>Apple</li>

   </ol>

       <p>Lower Alphabets</p>

    <ol type="a">

        <li>Red</li>

        <li>Blue</li>

        <li>Green</li>

        <li>Yellow</li>

   </ol>

        <p>Upper Alphabets</p>

   <ol type="A">

        <li>Food</li>

        <li>House</li>

        <li>Water</li>

        <li>Electricity</li>

        <li>Transportation</li>

  </ol>

        <p>Lower Roman</p>

  <ol type="i">

        <li>CEO</li>

        <li>Manager</li>

        <li>Supervisors</li>

        <li>Workers</li>

  </ol>

        <p>Upper Roman</p>

  <ol type="I">

        <li>Football</li>

        <li>Cricket</li>

        <li>Shooting</li>

        <li>Athletics</li>

  </ol>

</body>

</html>

Output

Output- Ordered Lists
Output- Ordered Lists

Unordered List

Unordered list is a bulleted list with different shapes for the bullets.  The different types of bullets are as follows.

  1. Default (bullet)
  2. Circle
  3. Disc
  4. Square

We shall see an example for each one these. Create a new HTML document called example-unordered-list.html.

<!DOCTYPE html>

<html>


    <head>


        <title>Unordered List </title>


    </head>


    <body>


        <h1>Unorder List Types</h1>


        <p>Default bullets</p>


        <ul>


            <li>Pink</li>


            <li>Green</li>

        </ul>

    
        <p>Disc</p>

        <ul style="list-style-type:disc">

            <li>Pink</li>

            <li>Green</li>

        </ul>

        <p>Circle</p>

        <ul style="list-style-type:circle">

            <li>Lion</li>

            <li>Tiger</li>

            </ul>

        <p>Square</p>

        <ul style="list-style-type:square">

            <li>Table</li>

            <li>Chair</li>

        </ul>

    </body>


</html>

Output

Output - Unordered Lists
Output – Unordered Lists