HTML Lists

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:

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

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

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *