HTML lists are great for organizing information in a structured and meaningful manner. There are three distinct types of lists in HTML, each serving a unique function.
Note: You can include text, images, links, line breaks, and more inside a list item. It's also possible to insert a whole list within a list item to make a nested list.
IIn the upcoming sections, we will discuss each of the three types of lists individually.
An unordered list is formed by using the <ul> element, and each item in the list begins with the <li> element. In unordered lists, the items are indicated with bullets.
Here's an illustration:
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>— Here's how the result will appear in the above example:
You have the option to modify the bullet style in your bulleted list by utilizing the CSS list-style-type property. By applying the following style rule, you can switch the bullet type from the standard disc to a square.
ul {
list-style-type: square;
}Make sure to take a look at the CSS lists tutorial for a comprehensive guide on how to style HTML lists effectively.
An ordered list is made with the <ol> tag, with each item starting with the <li> tag. These lists are handy when the sequence of items matters.
The items in an ordered list are indicated with numbers. Here's a sample:
<ol>
<li>Fasten your seatbelt</li>
<li>Starts the car's engine</li>
<li>Look around and go</li>
</ol>— Here's how the result will appear in the above example:
In most cases, when creating an ordered list, the items are numbered starting from 1. But if you wish to modify this, you can utilize the start attribute. Take a look at the example below to see how it works:
<ol start="10">
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>— Here's how the result will appear in the above example:
You can also utilize the CSS list-style-type property to modify the numbering style in an ordered list, just like you can with an unordered list. By applying the following style rule, you can change the marker type to roman numbers.
ol {
list-style-type: upper-roman;
}Tip: You have the option to adjust the numbering type by using the type attribute like type="I". But it's recommended to steer clear of this attribute and utilize the CSS list-style-type property instead.
A description list is a type of list that includes a description or definition for each item.
To create a description list, you use the <dl> element. This element works together with the <dt> element, which represents the term or item, and the <dd> element, which represents the definition of the term.
When displayed in browsers, the terms and definitions in a description list are usually shown on separate lines, with the definitions slightly indented. Here's an example to illustrate this:
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
— Here's how the result will appear in the above example: