HTML Lists: Ordered, Unordered and Description Lists

HTML lists group related items. Choose an unordered list when order does not matter, an ordered list when sequence matters, or a description list for terms and their descriptions.

Unordered list

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered list

Use <ol> for steps or rankings where order is meaningful.

<ol>
  <li>Create an HTML file.</li>
  <li>Add page content.</li>
  <li>Open the file in a browser.</li>
</ol>

Description list

Use <dl> with <dt> terms and <dd> descriptions.

<dl>
  <dt>HTML</dt>
  <dd>The markup language for structuring web content.</dd>
</dl>

Put a nested list inside a list item

To show subtopics under one item, place the nested <ul> or <ol> inside that item’s <li>. This keeps the parent and child items connected in the document structure.

<ul>
  <li>Web development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Start an ordered list at a different number

If a numbered list continues from an earlier section, set the start attribute on <ol>. The value must be a number.

<ol start="4">
  <li>Review the page</li>
  <li>Publish the update</li>
</ol>

Style list markers with CSS

Keep the HTML focused on the list’s meaning and use CSS to change its appearance. For example, list-style-type: square; changes unordered-list markers. Avoid using a list only to create page layout; use CSS layout tools such as Flexbox or Grid for that job.

HTML list questions

What is the difference between an ordered and unordered list?

An ordered list uses <ol> when sequence or numbering matters. An unordered list uses <ul> when the items have no required order.

When should I use a description list?

Use <dl> for groups of terms and their descriptions, such as a glossary or a set of product attributes. It is not a replacement for a regular bullet list.