What are Types of List in HTML?

What are the types of lists in HTML?

lists can be used to show different pieces of information that are related to each other. Listing the features of a particular product can be a simple example of a list. So, lists are important for showing any information on websites, which is why they are available in HTML.

There are three types of lists in HTML

• Ordered lists
• Unordered lists (the one being used in this list too)
• Definition lists

There are different tags in HTML to represent all different types of lists. Here's the table to show all the tags as a reference.

Unordered Lists or Bullet Lists

Unordered lists are generally used in places where we don't need the list to be arranged in a particular order. So, there's no need to provide indexing to the list. They can be represented with the help of bullet points.

Syntax

For an unordered list, the <ul> tag is used as the opening tag and </ul> as the closing tag. And all the list items must be inserted between these opening and closing tags. In addition, the list items are defined by the <li> tag, and it needs to be closed with the </li> tag as well.

Example

Also, we have three different bullet styles to represent the list items for an unordered list.

• disc
• circle
• square

Here's how these bullet styles look in HTML.

Let's create a to-do list with a few tasks to be done in the entire day. We'll create an unordered list of tasks and represent them with different bullet styles.

Output:

Ordered Lists

Ordered lists are those lists that are sequenced in a particular order, be it increasing or decreasing. 

An ordered list will be indexed either with the numbers, roman numerals, or alphabets.

Syntax

 The <ol> tag is used to define an ordered list, and it ends with the </ol> tag. 

The same <li> and </li> tags will be used to define the list items with their content between these tags. All the list items will be inserted between the tags of the ordered list. 

We can also make use of different attributes to represent the ordered list with several ways of indexing. Use the <ol type=" a | A | i | I | 1"> attribute to represent it in different ways.

<ol type="1"> is the default way to represent an ordered list. In this case, the indexing is done with the numbers.

<ol type="a"> for lowercase indexing

 <ol type="A"> for uppercase indexing

<ol type="i"> for lowercase Roman numerals

<ol type="I"> for uppercase Roman numerals

Also, if we need reverse indexing for the list items, we can make use of <ol reversed> for the same.

Example

We'll again consider the previous example of a to-do list, but let's make an ordered list so that the tasks are ordered based on their priority. The task having the lowest index has to be completed first.

Nested List

Nested lists can be created with a combination of different lists. Let's consider the same example of the to-do list that we have created above. What if we need to separate all the tasks based on what they are related to? We can use nest an ordered list inside the unordered list to represent all the tasks.

Syntax

A nested list can have a combination of different lists (based on the requirement). Given below can be one of the scenarios.

Example

We can use the above example and separate them according to the different categories of tasks. Here's what it looks like.

Output:

Definition Lists

There's also a way to create a list of the items with the list items also having a description. It is also known as a definition list. 

Syntax

The list items in the definition list will be enclosed within the <dl> and </dl> tags. 

To define the title for each of the list items, we can use <dt> and </dt> tags.

To add the description of each of these list items, <dd> and </dd> tags will be used. Make sure to place it only after the title of the list item. We can choose to put more than one description for each of the list items.

Example

Output:

Learn more

If you want to know more about lists, you can read about the lists in HTML.