HTML Unordered Lists

Master the art of organizing content with semantic, accessible unordered lists

Unordered lists are fundamental for content structure, navigation, and creating scannable, accessible web pages.

📝

Basic Unordered Lists

Fundamental Syntax

HTML Structure

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

• <ul> - Unordered List container
• <li> - List Item element
• Automatically adds bullets
• Built-in spacing and indentation

Rendered Output

First item
Second item
Third item

Default styling with disc bullets and proper indentation

Nested Lists

Nested HTML

<ul>
  <li>Main Category
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2
        <ul>
          <li>Sub-sub-item A</li>
          <li>Sub-sub-item B</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Visual Hierarchy

Main Category
- Sub-item 1
- Sub-item 2
  - Sub-sub-item A
  - Sub-sub-item B

Automatic bullet style changes for nested levels

Common Use Cases

Navigation Menus

Primary website navigation

✓

Semantic structure

✓

Keyboard accessible

✓

SEO friendly

Feature Lists

Product features or benefits

✓

Easy to scan

✓

Visual hierarchy

✓

Mobile friendly

Checklist/Todo

Interactive checklists

✓

User interaction

✓

Progress tracking

✓

Accessible

Nested Categories

Hierarchical data organization

✓

Clear hierarchy

✓

Organized content

✓

Scalable structure

Best Practices

✓ Use for related items of equal importance

✓ Maintain consistent bullet styles

✓ Limit nesting to 3 levels maximum

✓ Ensure proper contrast for bullets

✓ Use semantic HTML structure

✓ Provide adequate spacing

✓ Test with screen readers

✓ Consider mobile touch targets

List Usage Stats

85%

Websites use unordered lists

3.2s

Faster comprehension vs paragraphs

47%

Better mobile readability