Skip to content
html.sh

Lists

Lists

Section titled “Lists”

Lists are one of the most common content structures on the web. Whether it’s a shopping list, steps in a recipe, or definitions of terms, HTML provides semantic elements to organize them perfectly.

What you’ll learn:

  • Unordered lists (<ul>) for bullet points
  • Ordered lists (<ol>) for numbered sequences
  • Description lists (<dl>) for terms and definitions
  • Nested lists and advanced techniques
  • Best practices for accessible lists

Prerequisites:

Unordered Lists: Bullet Points

Section titled “Unordered Lists: Bullet Points”

Unordered lists are for items without a specific sequence. Use <ul> (unordered list) with <li> (list items):

Result

The browser automatically adds bullet points. Each <li> is one item.

Real-World Examples

Section titled “Real-World Examples”
Result

Ordered Lists: Numbered Sequences

Section titled “Ordered Lists: Numbered Sequences”

Use <ol> (ordered list) when the order matters:

Result

The browser automatically numbers the items. The order is semantic—it matters for understanding.

Types of Numbered Lists

Section titled “Types of Numbered Lists”

By default, <ol> uses Arabic numbers (1, 2, 3). You can change this with the type attribute:

Result

Common type values:

  • "1" — Arabic numerals (default)
  • "A" — Uppercase letters
  • "a" — Lowercase letters
  • "I" — Uppercase Roman numerals
  • "i" — Lowercase Roman numerals

Description Lists: Terms and Definitions

Section titled “Description Lists: Terms and Definitions”

Description lists are for terms with their descriptions. Use <dl> (description list), <dt> (term), and <dd> (definition):

Result

Multiple Terms and Definitions

Section titled “Multiple Terms and Definitions”

One term can have multiple definitions, and multiple terms can share a definition:

Result

Nested Lists: Lists Within Lists

Section titled “Nested Lists: Lists Within Lists”

Lists can contain other lists. This is useful for hierarchical information:

Result

Nesting automatically adjusts indentation and numbering. You can mix list types too:

Result
Section titled “Lists with Links”

List items often contain links. This is common for navigation menus and article listings:

Result

Complete Example: A Recipe

Section titled “Complete Example: A Recipe”

Here’s a realistic combination of lists in a recipe:

Result

Accessibility Best Practices

Section titled “Accessibility Best Practices”

Use Proper Semantic Elements

Section titled “Use Proper Semantic Elements”

Screen readers announce lists specially. Use <ul>, <ol>, and <dl> correctly:

<!-- Good: Semantic list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>


<!-- Bad: Not semantic -->
<div>Item 1</div>
<div>Item 2</div>

List Items Should Contain Content

Section titled “List Items Should Contain Content”

Each <li> should contain actual content:

<!-- Good -->
<li>This is a complete item</li>


<!-- Avoid -->
<li></li>
<li>Item text here</li>

Don’t Use Lists for Layout

Section titled “Don’t Use Lists for Layout”

Lists are for content structure, not design:

<!-- Bad: Don't use lists for layout -->
<ul>
  <li>Column 1 content</li>
  <li>Column 2 content</li>
</ul>


<!-- Use CSS for layout instead -->
<div class="columns">
  <div>Column 1 content</div>
  <div>Column 2 content</div>
</div>

Try It Yourself

Section titled “Try It Yourself”

Create lists for different purposes:

Result

Experiment with:

  1. Creating nested lists with multiple levels
  2. Mixing ordered and unordered lists
  3. Adding links inside list items
  4. Using different type attributes for ordered lists

Common Mistakes

Section titled “Common Mistakes”

Summary

Section titled “Summary”
  • <ul> for unordered lists (bullets)
  • <ol> for ordered lists (numbers)
  • <dl> for description lists (terms and definitions)
  • <li> for individual list items
  • <dt> for terms, <dd> for definitions
  • Lists can be nested for hierarchical information
  • Always use semantic list elements—don’t replace them with <div>
  • Proper list structure helps accessibility and SEO

Next Steps

Section titled “Next Steps”

Basic Structure

Learn semantic page structure with header, nav, main, and footer. Continue →

Semantic HTML

Level up with semantic elements for better structure. Continue →