Lists in HTML

Introduction

Shopping lists, recipe steps, menus: lists are everywhere. HTML has three kinds of list. You will use the first two almost every day.

Unordered lists

Use ul when the order does not matter. Each item goes in an li (list item). Browsers show bullet points.

Only li elements belong directly inside a ul.

Ordered lists

Use ol when the order does matter, like steps in a recipe. Browsers show numbers.

Nested lists

You can put a list inside a list item to make sub-items. The inner list goes inside the li, before its closing tag.

Description lists

A dl pairs a term (dt) with its description (dd). It is good for glossaries.

Try it yourself

Make an ordered list of three steps to make a drink. Then change one item into a nested list with two sub-items.

Summary

• ul is for bullets, ol is for numbered steps, dl is for term and description pairs.
• Each item in ul and ol is an li.
• Nest a list by placing it inside an li.