Skip to main content

HTML Lists

Think about the last time you went shopping, followed a recipe, or checked a to-do list. You did not read a long paragraph. You read short lines, one after another. Lists are one of the oldest and most natural ways humans organize information, and the web is full of them.

Even where you do not notice them, lists are working. A navigation menu is a list of links. A table of contents is a list of sections. A set of product features, a series of steps, a glossary of terms: all lists. In this section, you will learn how HTML marks them up, so that your content is easy to scan for people and easy to understand for browsers, search engines, and screen readers.


What You Will Learn​

In this section, you will be able to:

  • Create bullet lists with <ul> and <li>
  • Create numbered lists with <ol>, and control their start, direction, and numbering style
  • Create term and definition lists with <dl>, <dt>, and <dd>
  • Put lists inside other lists the right way
  • Change markers, spacing, and layout with CSS
  • Make lists accessible and meaningful for everyone
Prerequisites

You should know what an HTML element and an attribute are. If you need a refresher, review Paragraphs and Headings first.

Your First List​

Here is the smallest useful list: a bullet list of three items.

index.html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

There are two parts here:

  • <ul> is the list container. It says: "a group of related items starts here."
  • <li> is a list item. Each one is a single entry in the group.

You will see this "container plus items" pattern in every kind of HTML list.

The Three Kinds of Lists​

HTML gives you three list types. Each answers a different question.

TypeElementsQuestion it answersExample
Unordered list<ul> and <li>"What are the items?" (order does not matter)Ingredients, features, tags
Ordered list<ol> and <li>"What are the items in sequence?" (order matters)Steps, rankings, instructions
Description list<dl>, <dt>, and <dd>"What is this term, and what does it mean?"Glossaries, FAQs, metadata

Let's see all three side by side.

index.html
<!-- 1. Unordered: order does not matter -->
<ul>
  <li>Flour</li>
  <li>Eggs</li>
  <li>Milk</li>
</ul>

<!-- 2. Ordered: order matters -->
<ol>
  <li>Mix the dry ingredients.</li>
  <li>Add the eggs and milk.</li>
  <li>Bake for 20 minutes.</li>
</ol>

<!-- 3. Description: terms and meanings -->
<dl>
  <dt>Preheat</dt>
  <dd>Warm the oven before baking.</dd>
  <dt>Whisk</dt>
  <dd>Beat quickly to add air.</dd>
</dl>

Which List Should I Use?​

The most common beginner question is "ul or ol?" Use this quick test.

If you shuffled the items, would the meaning change?

  • No: use <ul>. A shopping list works in any order.
  • Yes: use <ol>. Recipe steps in the wrong order ruin the dish.
  • Is each entry a name paired with a description? Use <dl>.
ContentBest listWhy
Items to pack for a trip<ul>Any order is fine
Steps to install a tool<ol>You must follow the sequence
Top 5 programming languages<ol>The ranking is the point
Features of a product<ul>They are equal in importance
Glossary of tech words<dl>Each term has a definition
A website's main menu<ul>A group of related links
Author, date, and category of an article<dl>Names paired with values
Do not choose by looks

Beginners sometimes pick <ol> because they like numbers, or <ul> because they like bullets. Pick by meaning. You can change how a list looks with CSS later, but you cannot fix meaning with CSS.

Why Not Just Use Paragraphs or <br />?​

You could type items on separate lines with <br />, or start each line with a dash. It would look like a list. But it would not be a list.

<p>
  - HTML<br />
  - CSS<br />
  - JavaScript
</p>

A real list gives you things a fake one cannot:

  • Screen readers announce it. Users hear "list, 3 items," and can jump from item to item.
  • Browsers and search engines understand it. They know these lines belong together.
  • CSS can style it. Spacing, markers, and layout are easy to control.
  • It is easy to maintain. Adding, moving, or removing an item is simple and safe.

Lists You Already Use Every Day​

Once you know what to look for, lists are everywhere on the web.

On a websiteMarked up as
Navigation menu<ul> inside a <nav>
Breadcrumb trail (Home > Courses > HTML)<ol>
Search results<ol> or <ul>
Pricing plan features<ul>
FAQ questions and answers<dl>
Comments under an article<ul> or <ol>
"How to" tutorial steps<ol>

You already met the first one in Navigation Menus, where a list of links became a full menu.

Your Learning Path​

Follow the lessons in order. Each one builds on the one before.

A bonus lesson

This section includes one lesson that was not in the original plan: Styling Lists (list-styling.mdx). Lists look plain by default, and almost every real project changes their markers and spacing, so it deserves its own page between nested lists and accessibility.

Rules That Apply to Every List​

A few rules hold for all three list types. Learn them once and you will avoid most mistakes.

  1. Only <li> goes directly inside <ul> and <ol>. Text, headings, or paragraphs placed straight inside them are invalid.
  2. Only <dt> and <dd> go inside <dl>. You can also group each pair in a <div>.
  3. Anything can go inside an <li>: text, links, images, even other lists.
  4. Do not skip levels or mix up the containers. A nested list belongs inside an <li>, not beside it.
  5. Do not use lists only for indentation. Lists carry meaning. If the content is not a list, do not mark it as one.
<ul>
  <p>HTML</p>
  <li>CSS</li>
  Some loose text
</ul>

A Real-World Example​

Lists often work together. This small course card uses all three types in one place.

index.html
<h3>Intro to HTML</h3>

<dl>
  <dt>Level</dt>
  <dd>Beginner</dd>
  <dt>Duration</dt>
  <dd>4 weeks</dd>
</dl>

<h4>What you will learn</h4>
<ul>
  <li>Page structure</li>
  <li>Text, links, and images</li>
  <li>Lists and tables</li>
</ul>

<h4>How the course works</h4>
<ol>
  <li>Read the lesson.</li>
  <li>Try the example.</li>
  <li>Complete the practice.</li>
</ol>

Common Beginner Mistakes​

Here are a few traps worth knowing about before you start. Each one has a lesson later.

MistakeWhat goes wrongWhere you will fix it
Using <br /> and dashes to fake a listScreen readers and search engines do not see a listThis page
Choosing <ol> or <ul> by looksWrong meaning, wrong announcementsUnordered Lists, Ordered Lists
Putting text or <p> directly inside <ul>Invalid HTMLUnordered Lists
Placing a nested list outside an <li>Broken structureNested Lists
Using <dl> for ordinary bullet itemsTerms and definitions that do not existDescription Lists
Removing bullets with CSS and losing the list meaningSome screen readers stop announcing the listAccessible Lists

Lists for a Global Audience​

Lists travel across languages and cultures well, but a few habits help.

  • Keep items short and parallel. Start each item the same way ("Install...", "Create...", "Run..."). Translation tools handle short, regular lines best.
  • Remember that numbering styles differ. Some languages use their own numerals, and right-to-left languages place markers on the right. CSS can handle both.
  • Do not rely on the visual marker alone. In an ordered list, the meaning of "step 3" should be clear from the content too.
  • Set the lang attribute on your page so assistive tools read the list in the right language.

Quick Recap​

Test yourself. Click a question to reveal the answer.

1. Which element holds the items of a bullet list, and which holds each item?

<ul> is the container, and each item is an <li>.

2. When should you choose <ol> over <ul>?

When the order of the items matters, such as steps, rankings, or instructions.

3. Which three elements make a description list?

<dl> is the list, <dt> is a term, and <dd> is its description.

4. What can go directly inside a <ul> or <ol>?

Only <li> elements. Anything else must go inside an <li>.

5. Why is a real list better than lines separated by <br />?

A real list has meaning. Screen readers announce it, search engines understand it, and CSS can style it. A fake list is only text that looks like a list.

Key Takeaways​

  • HTML has three list types: <ul> for unordered items, <ol> for ordered items, and <dl> for terms and descriptions.
  • Choose by meaning. If shuffling the items would change the sense, use <ol>.
  • Only <li> belongs directly inside <ul> and <ol>, and only <dt> and <dd> inside <dl>.
  • Lists are everywhere: menus, steps, glossaries, and features. Real lists help screen readers, search engines, and you.
  • Keep items short and parallel, so your content works well across languages.

Ready to begin? Start with Unordered Lists.