HTML Unordered Lists

The Unordered Lists are used for showing sets of  items in an unorganized manner i.e. without any proper order. 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. We can customize it's design with the help of CSS.

Example

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
• Milk

Customize List item marker

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

Value	Description
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Example - Disc

<ul style="list-style-type:disc;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
• Milk

Example - Circle

<ul style="list-style-type:circle;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
• Milk

Example - Square

<ul style="list-style-type:square;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
• Milk

Example - None

<ul style="list-style-type:none;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
• Milk

Nested HTML Lists

Lists can be nested (list inside list) for giving more info about the list item:

Example

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

Note: A list item (<li>) can contain a new list for providing sub-items for a item in Lists, and other HTML elements, like images and links, etc.

Chapter Summary

Tag	Description
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list