HTML Course 7.1 Unordered lists (ul) and li elements

HTML Course 7.1: Unordered Lists (`ul`) and List Items (`li`)

An unordered list is a fundamental HTML structure for grouping related items in no particular order. It is marked up with the <ul> element, and each item within it is wrapped in an <li> element. Unordered lists commonly render with bullets, but their appearance can be customized with CSS.

1. Basic Syntax

The simplest unordered list looks like this:



  
  First item
  
  Second item
  
  Third item

2. Nesting Lists

You can create multi-level lists by placing a new <ul> (or <ol>) inside an existing <li>. Browsers will indent nested lists by default.


  Fruits
    
      Apple
      Banana
      Citrus
        
          Orange
          Lemon
        
      
    
  
  Vegetables
    
      Carrot
      Broccoli

3. List Items with Block-Level Content

Although <li> is an inline container, it can include block-level elements like <p>, <div>, <img>, and even other lists:


  
    Article
    This item contains a heading and a paragraph.
  
  
    
    Image with caption.

4. Global Attributes on `ul` and `li`

Both ul and li support all global HTML attributes:

id: Unique identifier for CSS or scripting.
class: Apply semantic classes.
title: Advisory tooltip text.
ARIA roles: role='list' on ul, role='listitem' on li for enhanced accessibility.


  Home
  About
  Contact

5. Accessibility Considerations

Proper markup ensures screen readers announce lists correctly:

Use semantic <ul> and <li> instead of generic <div>s.
Add aria-label or aria-labelledby on the <ul> if the list’s purpose isn’t clear.
Ensure each <li> has meaningful text or accessible content.


  Home
  About
  Contact

6. Default and Custom Bullet Styles

By default, browsers render bullets as solid circles. Though customization is done via CSS (list-style-type, list-style-image, or pseudo-elements), understanding the default types helps when planning your design:

disc (default solid circle)
circle (hollow circle)
square (solid square)

7. Best Practices

Keep list items short and focused on a single concept each.
Use nested lists sparingly—too many levels can confuse users.
Avoid using lists for layout; use CSS grids or flexbox instead.
Ensure links or interactive controls inside <li> are keyboard-accessible.
Properly close every <li> and <ul> tag to avoid rendering issues.

8. Common Pitfalls

Forgetting to wrap all items in <li>—some browsers may auto-correct but semantics are lost.
Nesting lists outside of <li>—lists must be children of a list item or direct container.
Using deprecated attributes like type on <ul>—these were removed in HTML5.

9. Summary

Unordered lists (<ul>) and list items (<li>) are essential for expressing groups of related content. They provide semantic structure, improve accessibility, and form the basis for menus, navigation, and feature lists. Mastery of proper markup and nesting techniques ensures clear, maintainable HTML and a better experience for all users.

HTML Course 7.1 Unordered lists (ul) and li elements

HTML Course 7.1: Unordered Lists (ul) and List Items (li)