How to implement various types of lists in HTML ?

Last Updated : 31 Jan, 2023

In this article, we will see the HTML List & their types along with their implementation. The List can be used to store the information in short, either in bulleted form or numbered format, that visually help to look at a glance. In other words, it is used to group together related items or lists, & used to structure and show important information where each list item is displayed on the new line.

HTML lists allow the content to follow a proper semantic structure. All the tags in the list require opening and closing tags. There are 3 types of lists in HTML, namely:

Unordered List
Ordered List
Description List

We will explore all the List types in HTML, along with their implementation through the examples.

Unordered List: An Unordered list is used to create a list of related items, in bulleted or unordered format. It starts with the <ul> tag, followed by the <li> tag to show list items inside <ul> tag.

Syntax:

<ul>
   <li>Item1</li>
   ...
</ul>

We can also use different CSS properties to create a list with different styles. It can have one of the following values :

circle: It gives a circle list item marker.
square: It gives square as list item marker.
disc: This is the default filled circular bullet item marker.
none: This is used to unmark list items.

Example 1: This example describes the Unordered List in HTML.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>HTML Unordered List</h4>
    <h4>Coding Language</h4>
    <ul>
        <li>C</li>
        <li>C++</li>
        <li>Core-Java</li>
        <li>Python</li>
        <li>Javascript</li>
    </ul>
</body>
 
</html>

Output:

Unordered List

Example 2: In this example, we will create an unordered list with a square list item marker.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>HTML Unordered List</h4>
    <h4>Coding Language</h4>
    <ul style="list-style-type:square;">
        <li>C</li>
        <li>C++</li>
        <li>Core-Java</li>
        <li>Python</li>
        <li>Javascript</li>
    </ul>
</body>
 
</html>

Output:

Unordered List with square type

Ordered Lists: The Ordered lists have an order which is either numerical or alphabetical. The <ol> tag is used to create ordered lists in HTML and just like unordered list, we use <li> tag to define or show lists inside <ol> tag.

Syntax:

<ol>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ol>

The ordered list has a type operator which defines what type of order the list will have, like whether the list will start with a numerical value or an alphabetical value. The various ways to use the ordered list, are given below:

type = “1”: List will start from 1.
type = “A”: Here the list will start from A.
type = “a”: Here the list will start from lowercase a.
type = “I”: The list will start from Roman numbers.
type = “i”: TheList will start from lowercase Roman numbers.

Example 1: This example describes the Ordered List in HTML.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>HTML Ordered List</h4>
    <h4>Coding Language</h4>
    <ol>
        <li>C</li>
        <li>C++</li>
        <li>Core-Java</li>
        <li>Python</li>
        <li>Javascript</li>
    </ol>
</body>
 
</html>

Output:

Ordered List

Example 2: In this example, we will create an ordered list with roman numbers.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>HTML Ordered List</h4>
    <h4>Coding Language</h4>
    <ol type="I">
        <li>C</li>
        <li>C++</li>
        <li>Core-Java</li>
        <li>Python</li>
        <li>Javascript</li>
    </ol>
</body>
 
</html>

Output:

Ordered List with roman type

The ordered list has another attribute called “start” where you can specify the starting point for the order of the list.

start: This is used to specify the starting point for the list item marker.

Example 3: In this example, we will create an ordered list with different start numbers using the start attribute.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>HTML Ordered List</h4>
    <h4>Coding Language</h4>
    <ol start="12">
        <li>C</li>
        <li>C++</li>
        <li>Core-Java</li>
        <li>Python</li>
        <li>Javascript</li>
    </ol>
</body>
 
</html>

Output:

Ordered List with Start Attribute

Description List: A description list is a type of list where each item has a description. It is also known as a definition list. The <dl> tag is used to create description list, the <dt> tag defines the item, and the <dd> tag describes each item in list.

Syntax:

<dl> Contents... </dl>

The HTML definition list contains following 3 tags:

<dl>: It defines the start of the list.
<dt>: It defines a item.
<dd>: It defines the description of each item.

Example: This example illustrates the Description List in HTML.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML Lists</title>
</head>
 
<body>
    <h2>GeeksforGeeks</h2>
    <h4>Description List</h4> 
    <strong>Developers Life</strong>
    <dl> <dt>Code</dt>
        <dd>- Code all day!</dd>
            <dt>Eat</dt>
        <dd>- Eat healthy food</dd> 
            <dt>Sleep</dt>
        <dd>- Sleep soundly!</dd>
    </dl>
</body>
</html>