HTML Lists In Depth: Ordered, Unordered, and Description Lists

Lists are everywhere on the web. Navigation menus, step-by-step instructions, feature bullets, FAQs, product specs — scratch the surface of almost any page and you’ll find a list underneath. They look simple, and the basic markup is simple, but there’s real depth here: three distinct list types, a handful of attributes that control how numbering behaves, rules for nesting, and a few accessibility details that separate sloppy markup from solid markup.

This article takes lists from “I can write a bulleted list” to “I know exactly which list to reach for and how to control it.” If you’ve worked through the earlier HTML pieces — like what HTML is and HTML attributes — you’ve already got the foundation you need. Let’s build on it.

The three kinds of list

HTML gives you three list elements, and they aren’t interchangeable. Picking the right one is half the skill:

• Unordered list (<ul>) — a set of items where the order doesn’t matter. Shown with bullets by default.
• Ordered list (<ol>) — a sequence where the order does matter. Shown with numbers by default.
• Description list (<dl>) — pairs of terms and their descriptions, like a glossary.

The first two are the workhorses you’ll use daily. The third is less common but genuinely useful once you know it exists. We’ll take them one at a time.

Unordered lists with <ul>

An unordered list is a collection of items with no inherent sequence — a shopping list, a set of features, the tags on an article. You build it with a <ul> wrapper and one <li> (list item) per entry:

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Bread</li>
</ul>

By default the browser renders each item with a bullet point. The key idea is the meaning: by using <ul>, you’re telling the browser, search engines, and screen readers “these things belong together as a group, and their order carries no significance.” Reordering them wouldn’t change what the list means.

Every direct child of a <ul> must be an <li>. You don’t put paragraphs or headings straight inside a <ul> — you put them inside an <li> if you need them:

<ul>
  <li>
    <strong>Free shipping</strong>
    <p>On all orders over $50, no code needed.</p>
  </li>
  <li>
    <strong>Easy returns</strong>
    <p>30 days to change your mind.</p>
  </li>
</ul>

An <li> can hold whatever you like — text, links, images, even another list. It’s a flexible container, not just a one-line slot.

Ordered lists with <ol>

When sequence matters — steps in a recipe, ranked results, a numbered procedure — reach for <ol>. The markup is identical to <ul>; you just swap the wrapper:

<ol>
  <li>Preheat the oven to 180°C.</li>
  <li>Mix the dry ingredients.</li>
  <li>Add the eggs and stir.</li>
  <li>Bake for 25 minutes.</li>
</ol>

The browser numbers the items automatically — 1, 2, 3, 4 — and, crucially, it keeps that numbering correct if you add, remove, or reorder items. You never hand-type the numbers, which means you can rearrange steps freely without renumbering anything by hand.

The semantic difference is the whole point: an <ol> says “the order of these items is meaningful.” Use it when shuffling the items would break the meaning, and use <ul> when it wouldn’t. “Steps to install the app” is an <ol>. “Reasons our app is great” is a <ul>.

Controlling the numbering

<ol> comes with attributes that let you control how the numbers appear. These are the ones worth knowing:

type changes the marker style. The default is decimal numbers, but you can switch to letters or Roman numerals:

<ol type="A">
  <li>First option</li>   <!-- A -->
  <li>Second option</li>  <!-- B -->
</ol>

The values are 1 (numbers, default), A (uppercase letters), a (lowercase letters), I (uppercase Roman), and i (lowercase Roman).

start sets the number the list begins counting from. Handy when a list is split across sections but the count should continue:

<ol start="5">
  <li>Item five</li>   <!-- 5 -->
  <li>Item six</li>    <!-- 6 -->
</ol>

reversed counts downward instead of up — perfect for a “top 5” countdown:

<ol reversed>
  <li>Bronze</li>   <!-- 3 -->
  <li>Silver</li>   <!-- 2 -->
  <li>Gold</li>     <!-- 1 -->
</ol>

And there’s one attribute that lives on the <li> itself: value lets a single item jump to a specific number, and items after it continue from there:

<ol>
  <li>One</li>            <!-- 1 -->
  <li value="10">Ten</li> <!-- 10 -->
  <li>Eleven</li>         <!-- 11 -->
</ol>

Description lists with <dl>

The third type is the one people forget exists. A description list is for name–value pairs: a term and its definition, a label and its data. Think glossaries, metadata, or a key-value spec sheet. It uses three elements together:

• <dl> — the wrapper for the whole list.
• <dt> — the term being described.
• <dd> — the description of that term.

<dl>
  <dt>HTML</dt>
  <dd>The markup language that structures web content.</dd>

  <dt>CSS</dt>
  <dd>The language that controls how that content looks.</dd>

  <dt>JavaScript</dt>
  <dd>The language that adds behavior and interactivity.</dd>
</dl>

This isn’t just a styled two-column layout — it carries real meaning. The markup explicitly says “this term goes with this description,” which is information a <ul> of paragraphs could never express. A description list is the honest, semantic choice for any term-and-explanation pairing.

You’re not locked into one-to-one pairs either. A single term can have several descriptions, and several terms can share one description:

<dl>
  <dt>Coffee</dt>
  <dt>Espresso</dt>
  <dd>A hot caffeinated drink.</dd>

  <dt>Author</dt>
  <dd>John Doe</dd>
  <dd>Jane Doe</dd>
</dl>

Nesting lists

Lists can live inside other lists, which is how you build sub-points and multi-level menus. The rule is precise: a nested list goes inside an <li>, not directly inside the parent <ul> or <ol>. The child list becomes part of the item it belongs to.

<ul>
  <li>Fruit
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Notice how the nested <ul> sits between the text “Fruit” and the closing </li> — it’s tucked inside the list item, not floating between items. Browsers indent each level automatically and switch the bullet style as you go deeper, giving you that familiar outline look.

You can mix types freely too. An ordered list of steps can contain an unordered list of sub-notes, and vice versa:

<ol>
  <li>Sign up for an account
    <ul>
      <li>Use a real email address</li>
      <li>Pick a strong password</li>
    </ul>
  </li>
  <li>Verify your email</li>
  <li>Complete your profile</li>
</ol>

Lists as the backbone of navigation

Here’s something that surprises beginners: most navigation menus on the web are actually unordered lists. The reason is semantic — a nav menu is a group of links with no required order, which is exactly what <ul> means. The bullets just get removed with CSS.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Wrapping the links in a <ul> inside a <nav> tells assistive technology “here is a navigation block containing a list of N links.” A screen-reader user hears how many items the menu has before stepping through them. Build the same menu out of bare <a> tags in a <div> and you lose all of that. The list is doing important work even though, visually, it ends up looking nothing like a list. If you’ve read about semantic structure, this is that principle in action.

Accessibility and good habits

Lists are already accessible by default — that’s the payoff for using the right element. A few habits keep them that way:

• Use the element that matches the meaning. Sequence matters → <ol>. No sequence → <ul>. Term–description pairs → <dl>. Don’t pick based on how the markers happen to look; pick based on what the content is.
• Don’t fake lists. Lines of text separated by <br>, or a pile of <div>s, might look like a list but tell assistive tech nothing. Screen readers announce real lists (“list, 4 items”) so users can navigate them — a stack of divs gets none of that.
• Keep <li> as the direct child. Only <li> belongs directly inside <ul>/<ol> (and only <dt>/<dd> inside <dl>). Anything else goes inside those items.
• Let CSS handle appearance. Need no bullets, custom markers, or a horizontal menu? That’s a styling job. The HTML stays a clean, meaningful list, and you change the look separately.

When to use which — a quick recap

Run any content through these questions and the right element falls out:

• Does the order matter? Yes → <ol>. No → <ul>.
• Are these term-and-description pairs? → <dl> with <dt> and <dd>.
• Is it a navigation menu or a set of links/features? → <ul> (order doesn’t matter).
• Are these numbered steps or a ranking? → <ol>, and use start/reversed/value if the numbering needs adjusting.

When two options seem to fit, ask the order question first — it settles most cases instantly.

Wrapping up

Lists are one of HTML’s most-used structures, and now you’ve seen all three properly:

• <ul> is an unordered list — bulleted by default, for groups where order is irrelevant.
• <ol> is an ordered list — numbered by default, for sequences where order matters. Its type, start, reversed, and value attributes give you full control over the numbering.
• <dl> is a description list — term (<dt>) and description (<dd>) pairs, ideal for glossaries and metadata.
• Nesting works by placing a sub-list inside an <li>, and you can mix types freely.
• Navigation menus are unordered lists with the bullets styled away — a perfect example of meaning over appearance.

The big takeaway is that lists are about meaning, not bullets and numbers. Choose the element that describes your content honestly, and you get clean markup, free accessibility, and styling that’s easy to control. From here, the natural next step is learning how to style these lists with CSS — changing markers, spacing, and turning a vertical menu into a horizontal navbar.