HTML: Adding a List

Added on Feb 17, 2015 in Lesson Snippets

There are three main types of lists that can be created in a HTML document: an “un-ordered list” (ul), an “ordered list” (ol) and a “description list” (dl).

TAG DESCRIPTION
<ul> To make an un-ordered list (a list displayed in bullet points). These type of lists are used to list a set of related items that have no particular order of organization (e.g. milk, butter, bread, etc).

write12Example

<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>
<ol> To group a set of related items in a specific order (e.g. cooking instructions). HTML displays an ordered list in number format.

write12Example

<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ol>
<dl> To make a description list that has name/value pairs. They are used to define events in further detail. Description lists use groups of <dt> (for name) and <dd> (for value).

write12Example

<dl>
<dt>Milk</dt>
<dd>A white, liquid diary product.</dd>
<dt>Bread</dt>
<dd>A baked food made of flour or meal.</dd>
</dl>