More Web Design Tutorials

Basic HTML – HTML Lists

February 26, 2011

There are three different types of lists that can be created with HTML: Ordered Lists, Unordered Lists, and Definition Lists. When to use which list largely depends on the content that’s being presented.

The Ordered List

<ul>
<li>item<//li>
<li>item<//li>
<li>item<//li>
</ul>

The Unordered List

<ol>
<li>item<//li>
<li>item<//li>
<li>item<//li>
</ol>

The Definition List

<dl>
  <dt>Item</dt>
    <dd>Description of Item</dd>
  <dt>Item</dt>
    <dd>Description of Item</dd>
</dl>

To see how these lists appear without any CSS applied, click here.

The appearance of the numbers and bullets can be styled with CSS, but that’s a different lesson.

In addition to the obvious, the site navigation items are really also just an unordered list. With a little bit of CSS (another different lesson), a vertical list can become a horizontal one.