Html Li

HTML li

Created By: chatGPT

HTML lists are a standard way to display items in an organized manner. They can be ordered or unordered. The <li> tag is used to define a list item. Here’s how you can create both types of lists:

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

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

In the example above, we use <ul> for an unordered list and <ol> for an ordered list. The <li> tags contain each individual item's content. Generally, unordered lists will show bullets, while ordered lists will show numbers.

<style>
    ul {
        list-style-type: disc;
    }
    ol {
        list-style-type: decimal;
    }
</style>

You can also customize the appearance of lists with CSS by changing the list-style-type. Here is an example for better presentation:

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

When using lists, you can nest them for hierarchical representations. Here’s how to create a nested list:

<ul>
    <li>Parent Item 1
        <ul>
            <li>Child Item 1</li>
            <li>Child Item 2</li>
        </ul>
    </li>
    <li>Parent Item 2</li>
</ul>

This results in a parent-child relationship where Child Items are sub-items of Parent Items, offering a clear structure for complex information.

<ol>
    <li>First Item
        <ol>
            <li>Sub Item A</li>
            <li>Sub Item B</li>
        </ol>
    </li>
    <li>Second Item</li>
</ol>