HTML lists let you group related items together. Think of a grocery list, a to-do list, or a set of instructions. Lists make information clean and easy to read.
Types of HTML Lists
There are three types of lists in HTML:
- Unordered lists – Use bullets (dots) for each item. Great for shopping lists.
- Ordered lists – Use numbers or letters. Great for step by step instructions.
- Description lists – Use terms and descriptions. Great for glossaries or FAQs.
Unordered HTML Lists (Bulleted Lists)
An unordered list starts with the <ul> tag. “ul” stands for “unordered list”. Each item in the list starts with the <li> tag. “li” stands for “list item”.
By default, browsers show unordered list items with small black circles (bullets).
Use unordered lists when the order of items does not matter. Your shopping list does not need to be in a specific order. Bananas can come before apples. It still makes sense.
Ordered HTML Lists (Numbered Lists)
An ordered list starts with the <ol> tag. “ol” stands for “ordered list”. Each item still uses the <li> tag.
By default, browsers show ordered list items with numbers (1, 2, 3…).
Use ordered lists when the order matters. If you do step 3 before step 2, your toast might not work. That is why numbers are important here.
Nested Lists (Lists Inside Lists)
You can put lists inside other lists. This is called nesting. It is great for creating outlines or categories with sub categories.
Notice how the inner lists are indented and have their own bullets. That makes it clear they belong to the main category above them.
Description Lists (Terms and Definitions)
Description lists are different. They are used for pairs of terms and their descriptions. Think of a dictionary or a glossary.
You need three tags:
<dl>– Wraps the whole description list<dt>– The term or name<dd>– The description of the term
Description lists are perfect for FAQs, glossaries, or any situation where you have a term followed by an explanation.
Changing List Styles with CSS (Quick Preview)
You can change how lists look using CSS. Here is a quick preview. You will learn more about CSS styling later.
As you can see, lists are very flexible. You can change bullets to circles or squares. You can change numbers to Roman numerals or letters.
Quick Summary
- Use
<ul>with<li>for unordered (bulleted) lists. - Use
<ol>with<li>for ordered (numbered) lists. - Use
<dl>,<dt>, and<dd>for description lists. - You can nest lists inside other lists to create sub categories.
- Lists are great for organizing information clearly.
What Just Happened? Let Me Explain
- Unordered lists are for items where order does not matter. Shopping lists, features of a product, things you like.
- Ordered lists are for sequences and instructions. Recipes, steps, rankings, top 10 lists.
- Description lists are for terms and their definitions. Glossaries, FAQs, product specifications.
- You can put any HTML inside a list item. Images, links, buttons, even other lists.
- Lists are one of the most common elements on the web. Almost every page uses them somewhere.
HTML List Reference
Here are the tags we covered in this chapter:
| Tag | Description |
|---|---|
<ul>
| Defines an unordered list (bulleted) |
<ol>
| Defines an ordered list (numbered) |
<li>
| Defines a single list item (used inside ul or ol) |
<dl>
| Defines a description list |
<dt>
| Defines a term inside a description list |
<dd>
| Describes the term in a description list |