Loading

Unordered List

  • Unordered lists are used to group the set of unrelated items.
  • items in the unordered list are marked with bullets, also called a bulleted list.
  • It starts with the <ul> tag, and list items begin with the <li> tag

Syntax:

    <ul>
        <li>line1</li>
        <li>Line2</li>
        <li>Line3</li>
    </ul>

Example:

 <!DOCTYPE html>
<html>

<head>
    <title>Unordered list</title>
</head>

<body>
    <h3>Unordered list example</h3>
    <ul>
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

</html>

Output:


The type Attribute in Unordered Lists

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

disc

  • The type="disc" attribute specifies the list item marker to a bullet (default)

Example:

 <!DOCTYPE html>
<html>

<head>
    <title>Unordered list</title>
</head>

<body>
    <h3>Unordered list example</h3>
    <ul type="disc">
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

</html>

Output:


Circle

  • The type="circle" attribute specifies the list item marker to a circle.

Example:

 <!DOCTYPE html>
<html>

<head>
    <title>Unordered list</title>
</head>

<body>
    <h3>Unordered list example</h3>
    <ul type="circle">
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

</html>

Output:


Square

  • The type="disc" attribute specifies the list item marker to a square

Example:

 <!DOCTYPE html>
<html>

<head>
    <title>Unordered list</title>
</head>

<body>
    <h3>Unordered list example</h3>
    <ul type="square">
        <li>Cat</li>
        <li>Dog</li>
        <li>Cow</li>
    </ul>
</body>

</html>

Output: