HTML Lists

HTML lists allow you to group a set of items in lists. There are three types of HTML lists:

1. Unordered Lists — bullet points (<ul>)
2. Ordered Lists — numbers or letters (<ol>)
3. Description Lists — name/value pairs (<dl>)

Unordered HTML Lists — Bullet Points

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>

Ordered HTML Lists — Numbered

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML List — Choose List Style with CSS

The list-style-type property in CSS lets you change the marker style:

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

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

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

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

Nested Lists

Lists can be nested — put a list inside an <li> to create sub-lists:

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

Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

The <li> Tag Default Styling

Next: HTML Tables