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

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

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 day month ye@r *