ul and li tag in HTML

• In HTML, the `<ul>` and `<li>` tags are used together to create unordered (bulleted) lists. The `<ul>` tag stands for "unordered list," and it acts as the container for the list items. Inside this container, each item of the list is marked with an `<li>` tag, which stands for "list item." Unordered lists are typically used to group a collection of items without a specific order of sequence.

<ul> Tag (Unordered List):

• The `<ul>` element is used to define an unordered list.
• It is a block-level element, meaning it starts on a new line and takes up the full width available.
• The list items inside an `<ul>` element are usually displayed with bullet points by default, although this can be changed with CSS.

<li> Tag (List Item):

• The `<li>` element is used to represent an individual item within a list.
• It can be used within `<ul>` (unordered lists) or `<ol>` (ordered lists) elements.
• The content of each `<li>` element can include text, images, links, and even nested lists.

Creating an Unordered List:

• To create an unordered list, you start with the `<ul>` tag, then nest each item you want in the list within `<li>` tags. Here's a simple example:

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

• This code will produce a bulleted list with three items. By default, most browsers will display this list with bullet points.

Styling and Customization:

• The appearance of the list and its items can be customized using CSS. For example, you can change the list's bullet style, adjust spacing, or even remove the bullets altogether. Here's a quick example of CSS that changes the bullet style:

    ul {

        list-style-type: circle;

    }

• This CSS rule changes the bullets to hollow circles. Other `list-style-type` values include `square`, `disc` (the default), `none` (no bullets), and more. You can also use images as bullets by setting `list-style-image` to a URL pointing to the image.

Nested Lists:

• You can nest `<ul>` elements inside `<li>` elements to create sublists. Here's an example:

    <ul>

        <li>Item 1</li>

        <li>Item 2

            <ul>

                <li>Subitem 1</li>

                <li>Subitem 2</li>

            </ul>

        </li>

        <li>Item 3</li>

    </ul>

• In this example, "Item 2" has a sublist with "Subitem 1" and "Subitem 2". This is useful for organizing hierarchical or related information.

• The `<ul>` and `<li>` tags provide a straightforward way to present lists of information in an organized, easy-to-read format, making them fundamental to web content structure.