HTML Lists

June 16, 2012 - Jake Bresnehan

HTML lists are very common in everyday web development. You might be familiar with unordered lists (<ul>) and ordered lists (<ol>), which are the most commonly used, but you might not be aware that there are a few other options to consider. Like the definition list (<dl>) and the menu (<menu>) element, which was deprecated in HTML4, but has been reintroduced in HTML5.

Unordered Lists – <ul>

An unordered list of items or text.

The HTML unordered list element (<ul>) represents an unordered list of items. The list items do not have any numerical ordering and the order is meaningless.

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

<ul>
 <li>Sushi</li>
 <li>Wasabi</li>
</ul>

The above renders like this:

  • Sushi
  • Wasabi

Ordered Lists – <ol>

An ordered list of items or text.

The HTML ordered list element (<ol>) represents an ordered list of items. The list order is meaningful.

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

<ol>
 <li>Sushi</li>
 <li>Wasabi</li>
</ol>

The above renders like this:

  1. Sushi
  2. Wasabi

Which list do you use? Ordered or unordered?

The <ol> and <ul> both represent a list of items. The difference is with the <ol> element, the order is meaningful. As a rule of thumb, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, otherwise use the <ul>.

Menu – <menu>

Used to define a list of menu choices.

The HTML menu element (<menu>) represents an unordered list of menu choices, or commands.

The <menu> and <ul> both represent an unordered list of items. The difference is that the <ul> element only contains items to display, whilst the <menu> element contains interactive items and is more likely to be used exclusively in Web Applications.

This element was deprecated in HTML4, but has been reintroduced in HTML5.


<menu type="toolbar">
 <li>
  <menu label="Upload">
   <button type="button" onclick="upload_new()">Upload</button>
  </menu>
 </li>
 <li>
  <menu label="Save">
   <button type="button" onclick="save()">Save</button>
  </menu>
 </li>
</menu>

Note: There is no limitation to the depth and nesting of lists defined with the <menu>, <ol> and <ul> elements.


List Item – <li>

Indicates an individual item in a list.

The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (<ol>), an unordered list (<ul>) or a menu (<menu>).


Definition list – <dl>

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

The HTML Definition List (<dl>) element encloses a list of terms and descriptions.

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


<dl>
 <dt>Sushi</dt>
  <dd>A Japanese food consisting of cooked rice combined with other ingredients</dd>
 <dt>Wasabi</dt>
  <dd>Is a root used as a condiment and has an extremely strong flavour</dd>
</dl>

The above renders like this:

Sushi : A Japanese food consisting of cooked vinegared rice combined with other ingredients

Wasabi : Is a root is used as a condiment and has an extremely strong flavour


Definition Term – <dt>

Defines a definition term used in a definition list.

The HTML Definition Term Element (<dt>) identifies a term in a definition list. This element can occur only as a child element of a <dl>.

Note: You can have multiple <dt> elements in a row to indicate several terms that are all defined by the following <dd> element.


Definition Description – <dd>

Describes a term in a definition list.

The Definition Description Element (<dd>) indicates the definition of a term in a definition list (<dl>) element. This element can occur only as a child element of a definition list and it must follow a <dt> element.


In case all of the above was a little confusing here, is a quick reference table of HTML list tags:

<td>
  Defines an ordered list
</td>
<td>
  Defines an unordered list
</td>
<td>
  Defines a list of menu choices. <em><small>Interactive items (Web Applications).</small></em>
</td>
<td>
  Defines a list item
</td>
<td>
  Defines a definition list
</td>
<td>
  Defines an item in a definition list (Definition Term)
</td>
<td>
  Defines a description of an item in a definition list
</td>
<ol>
<ul>
<menu>
<li>
<dl>
<dt>
<dd>

I hope this post has given you a little more insight in to the different lists you can use in HTML. I didn’t touch on any style options you have with the above lists but there are huge possibilities and a few small gotchas. Maybe another post is in order…

Resources:

https://developer.mozilla.org/en/HTML/Element

Join over 30,000 developers & designers who get the best news and articles delivered right to their inbox each week.