HTML Lists - Organize Content with Bullets and Numbers

Lists structure information clearly: bullets for unordered, numbers for ordered.

Great for menus, steps, features.

1. Unordered Lists (<ul>)

Bullets (•) for non-sequential items.

              
            
HTML

          Unordered list
        
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

2. Ordered Lists (<ol>)

Numbers (1,2,3) for sequences.

              
            
HTML

          Ordered list
        
<ol>
    <li>Boil water</li>
    <li>Add tea</li>
    <li>Add sugar</li>
</ol>

Attributes: start="5", reversed, type="A".

3. Nested Lists

              
            
HTML

          Nested example
        
<ul>
    <li>Fruits
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>
    </li>
    <li>Vegetables</li>
</ul>

4. Definition Lists (<dl>)

Term-definition pairs.

              
            
HTML

          Definition list
        
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

5. Complete Example

              
            
HTML

          Page with lists
        
<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>
<body>
    <h1>Shopping List</h1>
    <ul>
        <li>Fruits
            <ol>
                <li>Apple</li>
                <li>Banana</li>
            </ol>
        </li>
        <li>Dairy</li>
    </ul>
</body>
</html>

6. List Attributes

ol: type="1,a,I", start="3", reversed.

ul: type="disc,circle,square" (CSS preferred).

7. Best Practices

- Use semantic lists, not styled paragraphs.

- Nest properly for accessibility.

8. Common Errors

- <li> without parent <ul>/<ol>.

- Skipping </li>.

9. Next Steps

- Tables (<table>)

- Forms (<form>)

- Div and Span

Conclusion

Lists make content scannable and professional.

Practice with real data like menus or steps.