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.

Advertisements

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.

Advertisements
  • 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
Figure 1 – Output of 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
Figure 2 – Output of Unordered Lists

Advertisements

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.