HTML lists allow web developers to group a set of related items in lists.

HTML Lists are used to determine lists of data. All lists may contain at least one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

Example

An unordered HTML list:

  • Item
  • Item
  • Item
  • Item

An ordered HTML list:

  • First item
  • Second item
  • Third item
  • Fourth item

An Unordered HTML List

  • Coffee
  • Tea
  • Milk

An Ordered HTML List

  1. Coffee
  2. Tea
  3. Milk

Unordered HTML List

An unordered rundown begins with the <ul> tag. Each rundown item begins with the <li>tag.

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

Example

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

An unordered HTML list

  • Coffee
  • Tea
  • Milk

Ordered HTML List

An arranged rundown begins with the <ol> tag. Each rundown item begins with the <li> tag.

The list items will be set apart with numbers by default:

Example

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

HTML Description Lists

HTML additionally supports 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:

Example

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

A Description List

Coffee
– black hot drink
Milk
– white cold drink

HTML List Tags

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


Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.