HTML Unordered Lists

The HTML <ul> tag defines an unordered (bulleted) list.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:


<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

list-style-type - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

disc


<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

circle


<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

square


<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

none


<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Nested HTML Lists

Lists can be nested (a list inside another list):

<ul>
  <li>Coffee</li>
    <li>Tea
      <ul>
        <li>Black tea</li>
        <li>Green tea</li>
      </ul>
    </li>
  <li>Milk</li>
</ul>

Note: A list item (<li>) can contain a new list and other HTML elements, like images and links, etc.

<<< Back