đź“‹ Chapter Roadmap
Whenever you need to group related pieces of information together—like a shopping list, a step-by-step recipe, or a table of contents—you use HTML Lists. There are 3 main types of lists in HTML.
1 Unordered List (<ul>)
Use an Unordered List when the order of the items does not matter. Think of a grocery shopping list. By default, the browser will display these items with small black dots called bullets.
<li>Eggs</li>
<li>Bread</li>
- Milk
- Eggs
- Bread
Note: The <li> tag stands for "List Item" and is used inside all types of lists.
2 Ordered List (<ol>)
Use an Ordered List when the exact order of the items is extremely important. Think of a step-by-step cooking recipe or a "Top 3 Movies" list. By default, it uses numbers (1, 2, 3...).
<li>Add Pasta</li>
<li>Serve Hot</li>
- Boil Water
- Add Pasta
- Serve Hot
Powerful <ol> Attributes:
- 1. The
typeattribute: Changes the numbering style. You can usetype="1"(default),type="A"(Uppercase Letters),type="a"(Lowercase),type="I"(Roman Numerals). - 2. The
startattribute: Tells the list which number to start from. Example:<ol start="5">will start counting at 5 instead of 1.
3 Nested Lists (Lists inside Lists)
You can easily place an entire list inside another list item. This is extremely common for creating website navigation menus or detailed outlines.
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
4 Description List (<dl>)
A Description List is used to display Name/Value pairs. Think of it exactly like a Dictionary or a Glossary of Terms.
Description List
(The Main Wrapper)
Description Term
(The Dictionary Word)
Description Detail
(The Meaning/Definition)
- HTML
- Stands for HyperText Markup Language. It is the standard language for creating webpages.
- CSS
- Stands for Cascading Style Sheets. It is used to design and color the HTML elements.