← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 4 of 26

HTML Lists

Imagine cooking a meal without a structured recipe, or building a cabinet with the instructions printed in one giant, disorganized block of text. You would make mistakes and skip steps. HTML lists let you organize information into clean bullet points or numbered sequences, like a grocery list or step-by-step instructions. They group related information together to make your webpage text structured, scannable, and extremely easy for readers to digest.

In this page:

  1. Unordered Lists (ul and li)
  2. Ordered Lists (ol and li)
  3. Customizing List Markers (type and start)
  4. Nesting Lists Inside Lists
  5. Description Lists (dl, dt, dd)
  6. The reversed Attribute
  7. Choosing the Right List Type

Unordered Lists (ul and li)

Unordered lists are used when the order of the listed items does not matter. The browser displays these as bullet points. The list container uses the ul tag, and each list item is wrapped inside a li tag.

Note: Unordered lists are commonly used to build modern website navigation menus.

Warning: Never put text directly inside the ul tag; all list items must reside inside li tags.

Example: Unordered Lists (ul and li)

markup 
<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>

Ordered Lists (ol and li)

If you are coding a set of instructions or list rankings, the sequence of items is critical. Ordered lists use the ol tag as the main container, and the browser automatically numbers each nested li item chronologically.

Note: Use ordered lists when teaching readers how to run a process or follow steps.

Warning: Do not type the numbers manually inside your list items; the browser generates them automatically.

Example: Ordered Lists (ol and li)

markup 
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
</ol>

Customizing List Markers (type and start)

By default, ordered lists use numbers (1, 2, 3), and unordered lists use solid circular bullets. You can customize these lists using attributes: the type attribute changes the numbering style (like Roman numerals or letters), and the start attribute sets a custom beginning number.

Note: Use the type attribute to display alphabetical steps for clean and varied sub-steps.

Warning: Ensure you use valid attribute values to prevent the list from falling back to standard numbering.

Example: Customizing List Markers (type and start)

markup 
<ol type="I" start="3">
  <li>Third</li>
  <li>Fourth</li>
</ol>

Nesting Lists Inside Lists

To represent complex directories or sub-categories, you can nest one list directly inside another. To do this, you place the secondary list container inside a specific li item of your primary list.

Note: Indent nested lists in your code editor to make reading and maintaining your code much easier.

Warning: Make sure your nested list is wrapped entirely inside an li tag; placing it directly between li tags is invalid HTML.

Example: Nesting Lists Inside Lists

markup 
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

Description Lists (dl, dt, dd)

When coding a dictionary, glossary, or product specifications list, standard bullets are not the best format. Description lists group terms and descriptions using three tags: dl (description list), dt (definition term), and dd (definition description).

Note: Description lists are excellent for coding semantic metadata details for your articles.

Warning: Do not put list tags like ul or li inside a description list container.

Example: Description Lists (dl, dt, dd)

markup 
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

The reversed Attribute

The reversed attribute on an ordered list makes the numbering count downward instead of upward, without changing the actual order the list items appear in the HTML. This is handy for countdowns or ranked lists where the most important item should appear last in the markup but still show the highest number, or vice versa.

Note: Combine reversed with a custom start value to count down from any specific number you choose.

Warning: reversed only changes the displayed numbers — it does not visually reorder the list items themselves.

Example: The reversed Attribute

markup 
<ol reversed start="3">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

Choosing the Right List Type

Use an unordered list when the order of items truly does not matter, like a set of features. Use an ordered list when sequence matters, like step-by-step instructions. Use a description list when you are pairing terms with their definitions or explanations, like a glossary or FAQ.

Note: If reordering the items would change the meaning of the content, always use an ordered list, not an unordered one.

Warning: Using a div with manual numbers typed as text instead of a real ol element loses all the semantic and accessibility benefits lists provide.

Example: Choosing the Right List Type

markup 
<ul>
  <li>Fast shipping</li>
</ul>
<ol>
  <li>Add to cart</li>
</ol>
<dl>
  <dt>SKU</dt>
  <dd>Product code</dd>
</dl>
Common Mistakes
  1. Placing raw text or inline links directly inside ul or ol tags instead of nesting them inside li tags.
  2. Typing manual sequence numbers inside ordered list items, resulting in duplicate numbering on screens.
  3. Nesting secondary lists between list items rather than within a valid li element.
Chapter Summary
  • Unordered lists (ul) display bullet points, and ordered lists (ol) display numbered sequences.
  • Nesting lists is done by placing a new list container directly inside an existing li tag.
  • Description lists (dl) use dt and dd tags to group terms and definitions semantically.
Browser Support

Unordered, ordered, and description lists are core elements supported by all browsers.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Colgroup Next Lesson → HTML Unordered Lists

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.