Create Ordered, Unordered or Description list in HTML

Lists are a great way to organize information, they provide a simple structure, they are easy to read and write, they help you to arrange things in order, etcetera. HTML provides several listing possiblities. You can choose to have an unordered list, an ordered lists or a description list. In the following tutorial, we help you with listing in HTML.

Creating a list in HTML

An unordered list:

• La Chouffe
• Westmalle Tripel
• Karmeliet

An unordered lists starts with <ul> and ends with </ul> (‘Unordered List’). The various list items start with <li> and end with </li> (‘List Item’). We gladly give you an example of an unordered list in HTML.

<ul>
    <li>La Chouffe</li>
    <li>Westmalle Tripel</li>
    <li>Karmeliet</li>
</ul>

An ordered list:

1. (or a) La Chouffe
2. (or b) Westmalle Tripel
3. (or c) Karmeliet

An ordered lists starts with <ol> and ends with </ol> (‘Ordered List’ ). The various list items start with <li> and end with </li> (‘List Item’). We give you you an example of an ordered list in HTML.

<ol>
    <li>La Chouffe</li>
    <li>Westmalle Tripel</li>
    <li>Karmeliet</li>
</ol>

A description list:

La Chouffe

favorite Belgian beer

Westmalle Tripel

second favorite Belgian beer

Karmeliet

third favorite Belgian beer

A description list starts with <dl> and ends with </dl> (‘Description List’). The tag <dt></dt> defines the term, the tag <dd></dd> defines the description data. We give you an example of a description list in HTML.

<dl>
    <dt>La Chouffe</dt>
    <dd>favorite Belgian beer</dd>
    <dt>Westmalle Tripel</dt>
    <dd>second favorite Belgian beer</dd>
    <dt>Karmeliet</dt>
    <dd>third favorite Belgian beer</dd>
</dl>