Unordered Lists
By default a unordered lists mark your items with a bullet. like the Browser output example below. All unordered lists start with the <ul> tag. Then each item is separated with opening <li> tag and then closed with a </li> tag. Then we close it off with the </ul> tag.

Example:

<ul>
 <li>Stone IPA</li>
 <li>Fat Tire</li>
</ul>

Output:

• Stone IPA
• Fat Tire

Ordered Lists
Ordered lists work pretty much the same as unordered lists but instead of bullets it will mark your items with numbers. So we need to first start off with a <ol> tag. Like before we will use the <li> tag to list our items and end them off with </li>. At the end of all our listed items we will close them off with the </ol> tag.

Example:

<ol>
 <li>Heineken</li>
 <li>Redstripe</li>
</ol>

Output:

1. Heineken
2. Redstripe

Definition Lists
Definition Lists are different than your ordered and unordered lists, they are not a list of items but are terms that follow with an explanation of that term. We first start our list by opening with the a <dl> tag. Then we need to set our definition term <dt> and then close it </dt>. After our definition term then comes our Definition <dd> and once again close it </dd>. Once we have all our definitions and terms we close it with </dl>

Example:

<dl>
 <dt>Hops:</dt>
 <dd>A flower often used in beer for flavor </dd>
 <dt>Beer</dt>
 <dd>An alcoholic beverage</dd>
</dl>

Output:

Hops:

A flower often used in beer for flavor

Beer:

An alcoholic beverage

Definition List Tutorials:

• Tableless Forms