HTML Unordered and Ordered Lists Tutorial

1. Unordered Lists

Unordered lists are created using the <ul> tag, with list items defined inside it using <li> tags. By default, items are displayed with bullet points.

Edit Copy

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
                    

This example creates a simple bulleted list with three items.

2. Ordered Lists

Ordered lists are created using the <ol> tag, with list items specified using <li> tags. By default, items are displayed with numbers.

Edit Copy

<ol>
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ol>
                    

This example creates a numbered list with three steps.

3. Nested Lists

HTML allows you to nest lists, creating lists within lists for complex structures:

Edit Copy

<ul>
    <li>Item 1
        <ul>
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>
                    

This nested list example creates subitems under "Item 1" in the main list.

4. Changing List Styles with CSS

You can customize the appearance of lists with CSS, such as changing bullet styles and numbering types:

Edit Copy

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}
                    

This example changes unordered list bullets to squares and ordered list numbers to Roman numerals.

5. Conclusion

HTML lists are powerful for organizing content. Unordered and ordered lists provide structure and visual hierarchy, making information easier to read and navigate.