HTML Lists: Step-by-Step Guide

The HTML list tag is used to create lists on a webpage. It can create three types of lists: ordered lists, unordered lists, and description lists.

When you’re building a web page, you may want to present information as a well-formatted list. For example, you may have a roster of student names that you want to appear in a list form, or you may have a series of blog posts that you wish to format as a list.

In HTML, there is a built-in function that allows you to create lists. In this tutorial, we’ll cover HTML list types and how to implement them into a web page.

HTML List Types

There are three types of lists in HTML, and each one has a specific purpose and code. These are as follows:

• Ordered list: Used to create a list of items in a specific order.
• Unordered list: Used to create a list of items with no order.
• Description list: Used to create a list of items and descriptions.

Lists can appear in any part of a webpage, whether you place them inside the text, after line breaks, or even inside another list to create a nested list. Let’s break down how you can create these three types of lists in HTML.

HTML Lists: Ordered

Ordered lists are used in HTML when the order of the list is necessary. For example, if you have a series of instructions that need to occur in a particular order, you would want to use an ordered list. Ordered lists are numbered lists.

Ordered lists use the <ol> tag, and each item in the list uses an <li> tag. Here’s an example of an ordered list:

<ol>
	<li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li>
	<li>Leave the mix to rest for 30 minutes.</li>
	<li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li>
	<li>Pour batter mixture into the pan and cook on each side for one minute.</li>
</ol>

In the above example, we have created a basic recipe for pancakes. Each step in this list has to occur in order, so we chose an ordered list. Here is the output of our code:

Ordered lists start with the number one and go in ascending order. However, if you want your list to start at a different number, you can use the start attribute like so:

<ol start="5">
	<li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li>
	<li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li>
	<li>Enjoy your pancakes!</li>
</ol>

Our new list appears as follows:

HTML Lists: Unordered

If you want to create a list of items where the order of the list’s items is not important, you can use the HTML unordered list tag. We can create unordered lists using the <ul> tag, and each list item, like in our ordered list, starts with the <li> tag.

Here is an example of an unordered list:

<ul>
	<li>Alex</li>
	<li>Carol</li>
	<li>Lucy</li>
	<li>Shawn</li>
</ul>

Our list appears as follows:

HTML Lists: Description Lists

When you’re writing a list, you may want to include a description of each item on your list. For example, if you had a list of student names, you may want to add their grades, but not as part of the main list text.

That’s where description lists come in. Description lists are lists of items with a description of each element. Description lists are created using the <dl> tag, the main elements in the list use the <dt> tag, and definitions use the <dd> tag.

Here is an example of a description list in HTML:

<dl>
	<dt>Economy Class</dt>
	<dd>Standard seats, no meal service.</dd>
	<dt>First Class</dt>
	<dd>Luxury seats, catered meal service.</dd>
</dl>

Our code returns the following list:

As you can see, the airplane class names appear in a list format, and the descriptions for those names appear under each item. Each description is also indented, which distinguishes it from the list item.

Conclusion

Lists are an essential tag in HTML, which allows developers to present information in a well-formatted manner. Lists are typically more comfortable for users to read, and using lists also gives developers more control over the information structure.

In this tutorial, we have broken down lists in HTML, and how to create any of the three types of HTML lists: ordered (li ol tags), unordered (ul li tags), and description (dt dd tags). Now you’re on your way to creating lists in HTML like a pro!