HTML Lists

HTML provides various list types for displaying items in a structured format. There are three main types of lists in HTML:

• Unordered Lists - <ul>
• Ordered Lists - <ol>
• Definition Lists - <dl>

Unordered Lists

Unordered lists are used to group a set of related items in no particular order. The list items are marked with bullets by default.

        
            <ul class="unordered-list-example">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>
        
    

In this example, an unordered list with three items is created using the <ul> and <li> tags.

Ordered Lists

Ordered lists are used to group a set of related items in a specific order. The list items are marked with numbers or letters by default.

        
            <ol class="ordered-list-example">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>
        
    

In this example, an ordered list with three items is created using the <ol> and <li> tags.

Definition Lists

Definition lists are used to group a set of terms and their corresponding definitions.

        
            <dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>
        
    

In this example, a definition list with two terms and their definitions is created using the <dl>, <dt>, and <&lt;dd&gt;> tags.

Nesting Lists

Lists can be nested inside other lists to create multi-level lists.

        
            <ol>
    <li>First item</li>
    <li>Second item
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
        </ul>
    </li>
    <li>Third item</li>
</ol>
        
    

In this example, a nested list is created with an unordered list inside an ordered list.

Customizing List Style

The list-style-type CSS property can be used to customize the marker type of list items.

        
            <ul style="list-style-type: square;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
        
    

This example shows how to change the list marker type using the list-style-type CSS property.

Removing List Markers

The list-style CSS property can be used to remove list markers.

        
            <ul style="list-style: none;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
        
    

This example shows how to remove list markers using the list-style CSS property.

Important Notes

Here are some important notes and best practices when using lists in HTML:

• Use unordered lists for items that do not require a specific order.
• Use ordered lists for items that require a specific order.
• Use definition lists for term-definition pairs.
• Nest lists to create multi-level lists.
• Customize list markers using the list-style-type CSS property.
• Remove list markers using the list-style CSS property.