HTML Lists

HTML lists are used to group related pieces of information together. All lists must contain at least one list element. There are three different types of list ─

  • Unordered list — Used to group a set of related items, in no particular order.
  • Ordered list — Used to group a set of related items, in a specific order.
  • Description list — Used to display a list of terms and their descriptions.

HTML Unordered list

An unordered list is created with the <ul> tag, and each list item starts with the <li> tag.

By default, the list items in unordered lists are marked with bullets (•).

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee Beans</li>
</ul>
─ Result
  • Milk
  • Bread
  • Coffee Beans

HTML Ordered Lists

An ordered list is created with the <ol> tag, and each list item starts with the <li> tag.

By default, the list items in ordered lists are marked with numbers (1, 2, 3, …).

<ol>
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee Beans</li>
</ol>
─ Result
  1. Milk
  2. Bread
  3. Coffee Beans

HTML Ordered Lists – The Type Attribute

To define the type of the marker, you can add a type attribute to an ordered list.

Type Description List Style
type="1" Arabic numbers 1, 2, 3, …
type="A" uppercase letters A, B, C, …
type="a" lowercase letters a, b, c, …
type="I" uppercase roman numbers I, II, III, …
type="i" lowercase roman numbers i, ii, iii, …
Example Try this Code
<ol type="i">
  <li>Milk</li>
  <li>Bread</li>
  <li>Coffee Beans</li>
</ol>

HTML 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 Try this Code
<dl>
  <dt>Milk</dt>
  <dd>A white, liquid dairy product.</dd>
  <dt>Bread</dt>
  <dd>A baked food made of flour or meal.</dd>
  <dt>Butter</dt>
  <dd>A yellow, solid dairy product.</dd>
</dl>

Nested HTML Lists

The lists can be nested inside other lists like ─

Example Try this Code
<ul>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Coffee</li>
  <li>Milk</li>
</ul>