HTML Lists: Unordered, Ordered, and Description List Markup

HTML gives you three kinds of list: unordered for items where sequence does not matter, ordered for steps that run in order, and description lists for pairing terms with their definitions.

Screen readers can expose all three as more than visual bullets or numbers. Depending on the browser, screen reader, and navigation mode, a ul or ol may be announced as a list with an item count and offer shortcuts for moving between lists.

Syntax

<ul>
  <li>An item</li>
</ul>

<ol>
  <li>A step</li>
</ol>

Unordered Lists

An unordered list groups items where the order carries no meaning, like a set of features or a shopping list. You wrap the whole thing in ul and put each item in its own li. Browsers render a bullet before each item by default, though you will often restyle or remove those bullets in CSS.

<ul>
  <li>Eggs</li>
  <li>Flour</li>
  <li>Butter</li>
</ul>

You will reach for ul constantly once you notice the pattern: a feature list on a pricing page, a set of filter checkboxes in a sidebar, the ingredient block on a recipe site. None of those care what order the browser paints them in.

Removing bullets with list-style: none changes only the marker in most browser and screen-reader combinations. Safari can stop exposing an unstyled list as a list in some contexts, however. Keep navigation lists inside a semantic nav, and add role="list" when testing shows the list semantics need to be restored.

Ordered Lists

An ordered list is for items where the sequence genuinely matters, like steps in a recipe or a ranking. The markup is the same idea, except you use ol for the wrapper, and the browser numbers each li automatically. Add or remove a step and the numbers update on their own, so you never hand-type the digits.

<ol>
  <li>Preheat the oven to 200 degrees.</li>
  <li>Mix the dry ingredients.</li>
  <li>Bake for twenty minutes.</li>
</ol>

The same logic covers installation guides and ranked top-10 roundups. Change the sequence and the instructions stop making sense, which is the real test for reaching ol over ul.

Two attributes extend an ordered list past the basics. The start attribute changes the first number, useful when a set of steps continues from an earlier list, and reversed counts backward from the highest number down to one. You can also override a single item's number with the value attribute on that li, which comes in handy when one step gets renumbered after an edit.

<ol start="5">
  <li>Continuing from step four above.</li>
</ol>

A gotcha worth knowing early: the choice between ul and ol is about meaning, not appearance. If you want numbers, that is a signal the order matters, so reach for ol. If the sequence is incidental, use ul even when you plan to style it without bullets.

Description Lists

A description list pairs terms with their descriptions, which fits glossaries, metadata, and key-value details. The dl element wraps the list, each dt holds a term, and each dd holds the description that follows it. One term can have several descriptions, and several terms can share one description, so the pairing is flexible.

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

  <dt>CSS</dt>
  <dd>The language that styles how the page looks.</dd>
</dl>

A metadata block under a blog post follows the same shape: a publish-date label paired with its value and an author label paired with the author's name. Product spec sheets use the identical pattern, one term and one description, repeated down the page.

Description lists show up constantly in FAQ sections, product specification blocks built without an actual table, and glossary pages not unlike the definitions above. Whenever you are pairing a label with its value, reach for dl before gluing two div elements together with CSS and calling it done.

Nesting Lists

You can place a list inside an li to build a hierarchy, like sub-points under a main point. The inner list lives inside the list item it belongs to, nested between its opening and closing li tags, which keeps the structure valid and readable. Assistive technologies can expose that relationship as a list within a list, although the exact announcement varies by product and navigation mode.

<ul>
  <li>
    Fruit
    <ul>
      <li>Apples</li>
      <li>Pears</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Why Screen Readers Care

A sighted reader sees list structure through bullets, indentation, and numbers. A screen reader can expose the same relationship when the markup is a real ul, ol, or dl. The exact announcement and whether it includes an item count vary by browser, screen reader, CSS, and navigation mode.

Some screen readers provide commands for moving between lists or list items. Those commands depend on the product and mode, but they rely on real list semantics. Plain sentences separated by line breaks provide no equivalent relationship between the items.

Styling Lists with CSS

Removing the bullet with list-style: none is the easy part, and you already saw that above. list-style-type goes further, swapping the default disc for circle, square, decimal, or a custom string. The ::marker pseudo-element can style the bullet or number itself, including its color, font properties, and content string, without touching the item text next to it. Control spacing on the list or list item instead.

li::marker {
  color: #2563eb;
  font-weight: 700;
}

That single rule turns every bullet or number blue and bold. For the full rundown on selectors and specificity, the CSS guide covers it in depth.

Common Mistakes

The most common mistake is building a fake list out of div elements with a CSS bullet icon glued on. It looks identical to a real list in the browser and carries zero list semantics to anything but a sighted eye.

<!-- Looks like a list, is not one -->
<div class="fake-list">
  <div class="fake-list__item">Espresso</div>
  <div class="fake-list__item">Cold brew</div>
</div>

Without list semantics, assistive technologies may expose that markup as generic blocks rather than providing list relationships, counts, or list-item navigation. The second version of the same mistake swaps <br> tags in for real li boundaries, Espresso<br />Cold brew<br />Nitro inside one lonely <p>. It reads fine to your eyes but has no list relationship in the accessibility tree underneath it.

Reach for a real ul, ol, or dl any time you catch yourself building repeated items by hand. The browser starts with native list semantics, while divs and br tags do not. Still test the browser and screen reader combinations you support, and use the role="list" fallback described above when CSS removes list semantics in the target setup.

Example

<h2>Shopping list</h2>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

<h2>Brewing steps</h2>
<ol>
  <li>Boil the water.</li>
  <li>Pour it over the grounds.</li>
</ol>

That renders a bulleted shopping list under one heading and a numbered set of brewing steps under the next. The unordered items sit beside bullets, and the ordered steps count up from one without you typing the numbers.

Try swapping the ol wrapper for plain paragraphs and see what breaks. The numbers disappear, sure, but so does the built-in signal to a screen reader that these lines are sequential steps rather than three sentences with no relationship to each other.

Frequently Asked Questions

When should you use a list instead of paragraphs?

Use a list when the items are peers that could be reordered or counted: steps, options, features, requirements. Keep prose in paragraphs when the sentences build an argument, because a list breaks the thread that carries the reasoning.

Can you put other elements inside a list item?

Yes. An li accepts flow content, so paragraphs, images, and nested lists are all valid inside it. What is not valid is placing content directly between li elements, because every child of a ul or ol must be an li.

Does the type attribute still work for letters and roman numerals?

Yes. type="A", type="a", type="I" and type="i" remain valid on ol and change the marker to letters or roman numerals. The CSS list-style-type property does the same job with more options, and is the one to reach for when the numbering is presentational.

Should navigation menus be marked up as lists?

Usually yes. A nav containing a ul tells assistive technology how many links the menu holds and lets people jump the whole group. The bullets are removed with CSS, which changes the appearance without losing the structure.

Do bulleted lists help or hurt SEO?

Neither directly. Lists help because they make a page easier to scan and give search engines clearly delimited items to extract for features such as steps and summaries. Splitting prose into fragments purely to create bullets makes a page worse, not better.

Related

• Headings and Text: the text these lists sit among
• Links and Images: linking items inside a list
• CSS: A Practical Guide: style the lists you just built, from resets to custom markers
• HTML guide: the complete language overview