Articles → HTML → Lists In HTML

Lists In HTML

In this article, we will discuss ordered, unordered and description lists in HTML.

What Is A List?

The list is the number of connected items or names. For example, in your daily routine, you make a list of tasks, a list of grocery items you want to buy, and so on. The following image gives you an idea about the lists.

Picture showing the list in the real world

Types Of Lists

There are three types of lists: -

Ordered list
Unordered list
Description list

Ordered List

An ordered list is a collection of related items in a sequence.

Syntax

<ol><li>item1</li><li>item 2</li></ol>

Example

Consider an example in which you are working on a software project and you have written the list of tasks in a sequential manner like: -

Gather requirements
Check the feasibility
Requirements sign off
Design a system
Development
Testing
Delivery

In the above scenario, the sequence is fixed and you cannot interchange the sequence of tasks. So ordered list is perfect for the above scenario.

<html>
  <head>
    <title>List Demo</title>
  </head>
  <body>
    <ol>
      <li>Gather requirements</li>
      <li>Check feasibility</li>
      <li>Requirements sign off</li>
      <li>Design system</li>
      <li>Development</li>
      <li>Testing</li>
    </ol>
  </body>
</html>

Try It

Once you run the webpage, you get the following output: -

Picture showing the output of the ordered list

Here 1, 2, 3, and so on, is list item markers.

Type Attribute

An In ordered list, the ‘Type’ attribute specifies the type of list item marker. List item markers are the of following types: -

List item marker type	Description
Type = ‘1’	List will start with a number. The first list item marker would be 1 followed by 2, 3, and so on
Type = ‘a’	List will start with a lowercase alphabet. The first list item marker would be a followed by b, c, and so on
Type = ‘A’	List will start with an upper-case alphabet. The first list item marker would be A followed by B, C, and so on
Type = ‘i’	List will start with a lowercase roman number. The first list item marker would be "i" followed by ii, iii, and so on
Type = ‘I’	List will start with the upper-case roman number. The first list item marker would be I followed by II, III, and so on

Let us work on the simple example and use the same list that we have created in the list example.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <ol Type="1">
      <li>Gather requirements </li>
      <li>Check feasibility </li>
      <li>Requirements sign off </li>
      <li>Design system </li>
      <li>Development </li>
      <li>Testing </li>
    </ol>
    <ol Type="a">
      <li>Gather requirements </li>
      <li>Check feasibility </li>
      <li>Requirements sign off </li>
      <li>Design system </li>
      <li>Development </li>
      <li>Testing </li>
    </ol>
    <ol Type="A">
      <li>Gather requirements </li>
      <li>Check feasibility </li>
      <li>Requirements sign off </li>
      <li>Design system </li>
      <li>Development </li>
      <li>Testing </li>
    </ol>
    <ol Type="i">
      <li>Gather requirements </li>
      <li>Check feasibility </li>
      <li>Requirements sign off </li>
      <li>Design system </li>
      <li>Development </li>
      <li>Testing </li>
    </ol>
    <ol Type="I">
      <li>Gather requirements </li>
      <li>Check feasibility </li>
      <li>Requirements sign off </li>
      <li>Design system </li>
      <li>Development </li>
      <li>Testing </li>
    </ol>
  </body>
</html>

Try It

Now run the above code and you get the following output: -

Picture showing the output of the ordered list with type attribute

Unordered List

An unordered list is a collection of items without any sequence.

Example

The grocery list is the perfect example of an unordered list because the sequence of items does not matter.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <ul>
      <li>Milk</li>
      <li>Sugar</li>
      <li>Coffee</li>
    </ul>
  </body>
</html>

Try It

Once you run the webpage, you get the following output: -

Picture showing the output of the unordered list

List-Style-Type Property

The list-style-type property specifies the shape of the list item marker. There are 4 permissible values: -

Disc → Specifies the list item marker in the bullet shape
Circle → Specifies the list item marker in a circle shape
Square → Specifies the list item marker in a square shape
None → No marking for list item

Example

Copy and paste the following code to see the different shapes of the unordered list: -

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <ul style="list-style-type:disc">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:circle">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:square">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:none">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
</body>
</html>

Try It

Once you run the above code, you see the following output.

Picture showing the output of the unordered list with List-style-type attribute

HTML Description List

If your list is having description then a description list is more suitable.

Example

Consider an example in which you are designing an online menu for a restaurant. With every menu item, you want to tell the customer about the ingredient or method of cooking.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <dl>
        <dt>Yellow Pulse</dt>
        <dd>
            Fresh yellow pulse boiled and added spices for taste</dd>
        <dt>Pizza </dt>
        <dd>
            Freshly baked base with fresh vegatables.
        </dd>
    </dl>
</body>
</html>

Try It

In the above code: -

dl → Description List
dt → Description Term
dd → description

If you run the above code, you see the following output.

Picture showing the output of the HTML description list

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Monday, October 31, 2016

Updated On -	Thursday, November 2, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**