Home › Learn › HTML and CSS › HTML basics

Lists

Lesson 2 of 20. Unordered and ordered lists.

<ul> is an unordered (bulleted) list and <ol> an ordered (numbered) one. Both contain <li> list items and nothing else directly. Lists can nest: put another <ul> inside an <li>.

Use a list whenever the content is a list; screen readers announce "list, three items" and CSS can style the markers. Do not fake lists with dashes in paragraphs.

<ol>
  <li>Preheat the oven</li>
  <li>Mix the batter</li>
</ol>

Your task

Add an h2 that says Shopping, an unordered list with three items, then an h2 that says Steps and an ordered list with at least two items.

Hint 1

<ul><li>Milk</li><li>Bread</li><li>Eggs</li></ul>

Hint 2

The ordered list is the same with ol instead of ul.

Show the solution
<!doctype html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Lists</h1>
<h2>Shopping</h2>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>
<h2>Steps</h2>
<ol>
  <li>Go to the shop</li>
  <li>Buy everything on the list</li>
</ol>
</body>
</html>
Preview

    Renders in the preview as you type; the checks read the rendered page.