HTML Lists
Lists group related items, either as bullets or as numbered steps.
Use an unordered list when order does not matter and an ordered list when it does, such as steps in a recipe.
The Two List Types
- <ul> makes an unordered, bulleted list.
- <ol> makes an ordered, numbered list.
- <li> defines each item and goes inside either list.
Bulleted and Numbered
Both list types
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ul>
<ol>
<li>Boil water</li>
<li>Add tea leaves</li>
<li>Steep for 3 minutes</li>
</ol>
</body>
</html>Nested Lists
A list inside a list
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Drinks
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</li>
<li>Snacks</li>
</ul>
</body>
</html>Note: There is also a description list, <dl>, for pairs of terms and definitions.
Exercise: HTML Lists
Which tag creates an unordered (bulleted) list?
