Subjects and lessons to explore.

Law

Web Development · Foundations

Lists

9 min read 5 practice questions
6 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

HTML has three common list forms. Use ul with li items when their order does not carry meaning, and ol with li items when position or sequence matters. Use dl for name-and-description groups, with dt for a and dd for its . The browser's default bullets and numbers are not the deciding factor: choose the element that expresses the relationship among the items.

Why this matters

Lists make a page's structure explicit instead of leaving relationships to punctuation and visual styling. That matters when a browser renders the page differently, when CSS changes the appearance, and when software reads the document structure. In coursework and professional work, the ability to select ul, ol, or dl communicates whether readers should treat items as peers, steps, or labeled descriptions. It also makes markup easier to maintain: a later editor can see the intended relationship before touching a stylesheet.

The college version

A list expresses a relationship

A list is not merely several short lines that happen to sit together. In HTML, it is a grouping whose elements say how the pieces relate. The ul element represents a list of items where their order is not important; its direct list-item children are li elements. A shopping list is a straightforward example: apples, rice, and soap are items to obtain, but swapping their positions does not normally alter the task. An may appear with bullets in a browser, but the bullet is a default presentation, not the reason to choose ul. CSS can replace, remove, or reposition a marker while the source still communicates an unordered collection. This distinction prevents a common mistake: choosing elements by the symbol a browser happens to draw. Choose ul when the content is a set of peer items and the sequence itself does not convey a different meaning. This lesson concerns list semantics; navigation structures, page landmarks, and visual list styling have their own lessons.

Ordered lists make sequence part of the content

The ol element represents a list in which the order of the items is intentionally meaningful. Its items are also li elements. A procedure such as first measure, then cut, then assemble is a strong use case because rearranging the steps can change the result. Ranked results and a chronology can also be ordered lists when the position is information rather than decoration. Browsers commonly show numeric markers for an ol, but numbers are not a substitute for deciding whether order matters. If a designer uses CSS to display an without visible numbers, the underlying markup still represents a sequence; conversely, applying decorative numbers to unrelated paragraphs does not make them an ordered list. HTML also provides attributes such as start and reversed for particular ordered-list cases, but an author should first establish that a real ordered relationship exists. Do not use ol just to obtain a numbered appearance for a group whose order can freely change.

Description lists pair terms with details

A uses a different relationship from ul and ol. The dl element represents associations of names and values, terms and definitions, or other descriptions. In its basic form, dt supplies a term or name and dd supplies the associated description. A glossary can therefore use a dl: one dt might be HTTP, followed by a dd that explains it. The standard allows grouping patterns that can associate multiple terms with one description or multiple descriptions with one term; beginners should still keep pairings clear and close together. A description list is not a universal layout tool and is not simply a list with a different marker. Use it when the content really consists of labels and their explanations. For a checklist, use ul; for instructions with order, use ol; for tabular data with headers and cells, use a table. Correctly matching the element to the relationship makes the HTML describe content rather than imitate a visual arrangement.

Reading and validating a small fragment

Consider <ol><li>Draft</li><li>Review</li><li>Publish</li></ol>. The outer ol asserts that the three stages have an order, while each li is one item in that list. If the stages could be performed in any order, changing only CSS from numbers to bullets would not correct the semantic choice; the outer element should become ul. For a glossary fragment, <dl><dt>Cache</dt><dd>Stored data reused to avoid repeating work.</dd></dl> makes the label-and-description relationship explicit. The WHATWG standard gives ol and ul a list-item content model and gives dl a description-group model; a conforming author should not place loose text where a required or description component belongs. A markup validator is useful for catching structural errors, but validation cannot decide the author’s meaning. That decision comes first: identify whether the reader needs a peer collection, a sequence, or paired labels and explanations, then write the matching elements.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

HTML lists are labels for three kinds of groups. A ul says, “Here are several things, and their order is not a message.” An ol says, “These things go in this order.” A dl says, “Here is a name, and here is what it means.” The marks a browser draws—bullets or numbers—can change, so look at the relationship, not the decoration. Each li, dt, or dd plays a specific role inside its matching group.

Picture it like this

Imagine three classroom boards. One holds supplies to bring, where any order works. One holds recipe steps, where changing the order can spoil the result. One has vocabulary cards, with a word on the front and its explanation on the back. Those are like ul, ol, and dl.

Where the picture stops working

A web list is markup parsed by a browser, not a physical board. Description lists can also represent other name-value relationships, and a real page may contain nested lists or more complex groups than this introductory picture shows.

Worked example

A course page needs a short section titled “Lab preparation.” Its content is: bring goggles, bring a notebook, and bring a pencil. Because exchanging those three items changes nothing, write <ul><li>Goggles</li><li>Notebook</li><li>Pencil</li></ul>. A separate procedure says: collect materials, set up the apparatus, then record observations. Here the order affects the task, so use <ol> with the same three li elements. Finally, if the page defines Variable and Control, use <dl>, place each word in dt, and put its explanation in dd. The choice comes from the relationship, not from whether the author prefers dots or numerals.

Key takeaway

Use ul for peer items, ol for meaningful sequence, and dl for terms or names paired with descriptions. Let the content relationship choose the markup, then use CSS for appearance.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

Which element represents an unordered list in HTML?

Choose an answer, then check it.
Question 2 of 3intermediate

A page gives assembly steps that must be followed in sequence. Which markup is most appropriate?

Choose an answer, then check it.
Question 3 of 3intermediate

In a basic glossary built with a description list, what is the role of dt?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define unordered, ordered, and description lists in HTML.
  • Distinguish when item order is meaningful from when it is not.
  • Identify the permitted roles of li, dt, and dd in a basic list.
  • Apply appropriate list markup to a short content scenario.
  • Explain why visual bullets or numbers alone do not determine HTML semantics.

Common mistakes

  • Using ol only because numbered markers look nicer.

    Use ol when order is meaningful; use CSS for a visual treatment after choosing the semantic element.

  • Putting list text directly inside ul or ol without li elements.

    Represent each ordinary item with an li child of the ordered or unordered list.

  • Using a description list for a sequence of instructions.

    Use ol for steps whose order affects the task; reserve dl for labels and associated descriptions.

  • Assuming bullets always mean an unordered list.

    Bullets are presentation. Determine whether the content is unordered, ordered, or term-description pairs.

Easily confused

`ul` vs. `ol`

Both contain li items, but ul is for items without meaningful order and ol is for an ordered sequence.

`ol` or `ul` vs. `dl`

The first two organize items; dl organizes associations between terms or names and descriptions.

HTML list semantics vs. CSS list styling

HTML describes the relationship among content; CSS can alter visual markers without changing that relationship.

Key vocabulary

unordered list
An HTML ul collection whose items do not have a meaningful sequence.
ordered list
An HTML ol collection whose item positions or sequence convey information.
list item
An li element representing one item in an ordered or unordered list.
description list
A dl grouping that associates terms, names, or labels with descriptions.
term
A dt entry in a description list that names the item being described.
description
A dd entry in a description list that supplies information associated with a term.

Sources & references

  1. HTML Living Standard — Grouping content — WHATWG
  2. MDN Web Docs — <ul>: The Unordered List element — Mozilla / MDN Web Docs
  3. MDN Web Docs — <ol>: The Ordered List element — Mozilla / MDN Web Docs
  4. MDN Web Docs — <dl>: The Description List element — Mozilla / MDN Web Docs

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.