HTML Lists

The most common HTML lists are ordered and unordered lists:

An ordered list:

    1. The first list item
    2. The second list item
    3. The third list item


An unordered list:

HTML Unordered Lists

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

The list items are marked with bullets (typically small black circles).
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

• Coffee
• Milk

You can add any style as
<ul style="list-style-type:disc">
<ul style="list-style-type:circle">
<ul style="list-style-type:square">

HTML Ordered Lists

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

The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Other types are
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">

HTML Definition Lists

A definition list is a list of items, with a description of each item.

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

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

Seen as

Nested List

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

« Previous Chapter                                                                                                                                          Next Chapter »