HTML <ul> tag – Unordered List

What is the HTML <ul> Tag?

If you have a list of items and want to display them without order using bullet points, circles, or square symbols, then you can use the <ul> element. It keeps list items inside the <li> element and displays them using different bullet styles. These bullet styles can be set using CSS. If you do not set any CSS for the list, the browser shows a disc bullet by default.

This element is like a shopping list, and the bullet points are like marks that show each item separately. Just as each item in a shopping list is shown without any particular order, the <ul> tag displays list items without showing a specific order.

Uses:

• It is used to create an unordered list of items.
• It displays list items using bullet points.
• It is useful when the order of the list items is not important.

Syntax:

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

List of Attributes:

• type → To provide the bullet style

Types of Unordered Lists:

• Disc: ●
• Circle: ○
• Square: ■

Examples:

1.Disc:

Output:

• HTML
• CSS
• JavaScript

2. Circle:

Output:

• HTML
• CSS
• JavaScript

3.Square:

Output:

• HTML
• CSS
• JavaScript

Using the <ul> Tag with a <table>

• The <ul> tag is placed inside the <td> element of a <table>. The <ul> tag creates an unordered list inside the table cell, where the list items are displayed using bullet points.
• The <li> tag is placed inside the <ul> tag to create each item in the unordered list.

Example:

<table border="1" cellpadding="8">
    <tr>
        <th>Course</th>
        <th>Topics</th>
    </tr>

    <tr>
        <td>Web Development</td>
        <td>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </td>
    </tr>

    <tr>
        <td>Backend Development</td>
        <td>
            <ul>
                <li>PHP</li>
                <li>MySQL</li>
                <li>Python</li>
            </ul>
        </td>
    </tr>

</table>

Output: