html

HTML Lists

Every HTML document is made up of multiple HTML elements and for that HTML provides multiple tags to perform different functionalities. However, sometimes we have to group multiple items on a web page e.g we have to list the employees based on their pay scale, etc.

Can we do this? Does HTML offer any particular phenomenon to group the multiple items? Yes! HTML provides different types of list such as ordered list, unordered lists, etc. These lists are used to group the multiple items within a list.

This write-up will provide a comprehensive overview of HTML lists with examples. Moreover this article will guide us how to create an order list, unordered list, descriptive list and nested list. Working of each list will be explained with the help of examples.

HTML offers various types of HTML lists as described below:

HTML ordered list

It is also known as a numbered list. It arranges the data in a specific order. In the ordered list everything will come in between the starting tag <ol> and ending tag </ol>. While within the ordered list the items will be written within the <li> tag.

An ordered list can display the data in different formats like alphabetic, numeric, roman, etc. By default, the list displays the “list items” in numeric form however it can be changed using its “type” attribute.

Example 1

Let’s consider the following example that determines how ordered list work:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<h3 style="background-color: navy; color: grey;">List of Web Development Frameworks </h3>

<ol>

<li>Django</li>

<li>Laravel</li>

<li>ASP.Net</li>

<li>Flask</li>

<li>ExpressJS</li>

</ol>

</body>

</html>

The above code will give the output something like this:

From the output, we can observe that the list appeared in numeric form.

What if the requirement is to display the list in some other format i.e alphabatic, roman, etc.? In such case we must have to specify the format in the “type” attribute.

Example 2

Let’s assume we have to declare the list items in the alphabetic format then the type attribute will be set to the specified format i.e. “type=A” or “type=a” as shown in the the following snippet:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<h3 style="background-color: navy; color: grey;">List of Web Development Frameworks </h3>

<ol type="A">

<li>Django</li>

<li>Laravel</li>

<li>ASP.Net</li>

<li>Flask</li>

<li>ExpressJS</li>

</ol>

</body>

</html>

Now, this code will generate the following output:

Example 3

Furthermore, we can specify the starting index for the list using the “start” attribute as shown in the following script:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<h3 style="background-color: navy; color: grey;">List of Web Development Frameworks </h3>

<ol type="i" start="6">

<li>Django</li>

<li>Laravel</li>

<li>ASP.Net</li>

<li>Flask</li>

<li>ExpressJS</li>

</ol>

</body>

</html>

The output will prove that the list index started from the “vi”:

After having the detailed knowledge about HTML ordered list, let’s move forward and learn HTML unordered list.

HTML unordered list

Generally used if there is no need to arrange the data in any specific order. <ul> tag will be used to create the unordered list and inside the list, the items will be written within the <li> tag.

An unordered list displays the data in various formats such as square, circle, etc. By default, it shows the “list items” in bulleted form however it can be changed using its “type” attribute.

Example

The bellow-given example will create two unordered list, and in the first list, there is no type mentioned, so it will provide the result in bulleted form. However, in the second list, the type attribute is set to square and as a result the list items will be initiated with the square:

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<h3 style="background-color: goldenrod; color: black;">List of Web Development Frameworks </h3>

<ul style="background-color: navy; color: yellow;">

<li>Django</li>

<li>Laravel</li>

</ul>

<ul style="background-color: gray; color: black;" type="square">

<li>ASP.Net</li>

<li>Flask</li>

<li>ExpressJS</li>

</ul>

</body>

</html>

The output of above code snippet would go like this:

HTML description list

It is also known as the definition list. It is used to describe/define the list’s items. There are three types of tags used in the description list <dl> tag, <dt> tag, and <dd> tag.

  • <dl> tag represents description list,
  • <dt> tag represents data terms,
  • <dd> tag represents data definition.

Example

Below-given code will implement the description lists to determine the two data terms with their definition:

<html>

<head>

<title>Description Lists</title>

</head>

<body>

<h3 style="background-color: goldenrod; color: black;">List of Web Development Frameworks </h3>

<dl style="background-color: navy; color: yellowgreen;">

<dt>Django</dt>

<dd>Framework for Python</dd>

<dt>Laravel</dt>

<dd>Framework for Php</dd>

</dl>

</body>

</html>

The output will be like this:

Nested Lists

HTML supports the concept of the nested list which means one list can be created within the other list.

Example

In this example, we will embed an unordered list within the ordered list:

<html>

<head>

<title>Nested HTML Lists</title>

</head>

<body>

<h3 style="background-color: goldenrod; color: black;">List of Web Development Frameworks </h3>

<ol style="background-color: navy; color: yellowgreen;">

<li>Framework for Python

<ul style="color: black; background-color: gold;">

<li>Django</li>

<li>Flask</li>

<li>CherryPy</li>

</ul>

</li>

<li>Framework for Php

<ul style="background-color: gold; color: indigo;">

<li>Laravel</li>

<li>CakePHP</li>

<li>Phalcon</li>

</ul>

</li>

</ol>

</body>

</html>

The output of this example will be as follows:

Conclusion

HTML lists group different items in a list. HTML offers different tags to create lists for example the <ol>, <ul>, and <dl> tags are used to create an ordered, unordered, and descriptive list respectively. Furthermore, the <li> tag determines the list item, the <dt> tag determines the description term, while <dd> depicts the definition for a <dt> tag.

This tutorial explains how to create ordered, unordered, descriptive, and nested lists. For better understanding, this article explained each list with the help of examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.