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:
- Sushi
- 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…
