HTML Unordered List

HTML element <ul> is used to define an unordered list with element <li> defining each item of the list as shown below.

  • Element <ul> to define an unordered list
  • Element <li> to define each item of a list

By default, each item on the list is marked with disc-shaped bullets.

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

List Bullet Styles

HTML unordered list default bullet style can be changed to any of the below types by adding an additional attribute type as shown.

  • type="disc" (default)
  • type="circle"
  • type="square"
  • type="none" (no markers)
<ul type="circle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Examples

We can check the outcome of the below HTML document to see how it looks.

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Unordered List</h1>
    <hr>
    <h2>Default bullet style (disc)</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Bullet type = circle</h2>
    <ul type="circle">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Bullet type = square</h2>
    <ul type="square">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <h2>Bullet type = none</h2>
    <ul type="none">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Other List Types

Take a look at the article on HTML Lists to know more about other types of HTML lists.

Overall

We can use an unordered list when we need to group items together and we really don't need to number them.