HTML Lists

Section 1: Overview

Simple lists were discussed in the previous HTML5 notes (click Simple Lists to expand it), but they can be much more complex.

• Unordered lists are commonly used to implement the navigation bar of a website.
  • The typical structure of a navigation bar is a nav element that contains an unordered list with the list-style property set to none.
  • Each list item in the unordered list is a menu item.
  • This example from John Young demonstrates menus based on unordered lists.
  • Side note: Note the growing use of the three line menu icon (navicon or hamburger menu) to represent navigation menus on responsive sites.
• Further, there is a type of list, a description list, that has not been discussed.

Section 2: Ordered Lists

There are some features of ordered lists that were deprecated in older versions of HTML but have now been redefined.

start Attribute

In HTML4 the "start" attribute for the <ol> tag was deprecated, but was reinstated in HTML5.

If you want an ordered list to start numbering at 10 rather than one, use <ol start="10">

value Attribute

In HTML4 the "value" attribute for the <li> tag was deprecated, but was reinstated in HTML5.

• This allows you to change the number of each list item directly using syntax like <li value="10">.
• If you want an ordered list to be numbered 10, 20, 30 rather than 1, 2, 3, use <li value="10"></li> followed by <li value="20"></li>, etc.
• 10. Milk
  20. Eggs
  30. Bread

reversed Attribute

The "reversed" attribute allows your list to count backwards.

• For example, if you wanted to generate something like the "Late Show Top Ten" list that counts from 10 to 1, you could use the "reversed" attribute, as in <ol reversed>
• 1. Milk
  2. Eggs
  3. Bread

Section 3: Nested Lists

Since list items can contain paragraphs, images, links, and even other lists, it is very easy to create nested lists.

• A nested list is simply a list contained within another list.
• These notes make extensive use of nested lists.
• Here is an example:
  <ul>
  <li>First item</li>
  <li>
  Second item
  <!-- This is the nested list -->
  <ul>
  <li>Sub item 2a</li>
  <li>Sub item 2b</li>
  </ul>
  </li>
  <li>Third item</li>
  </ul>
• Here is the list in action:
  • First item
  • Second item
    • Sub item 2a
    • Sub item 2b
  • Third item
• This can be done with ordered lists as well.

Section 4: Description Lists (Reference Only)

The HTML <dl> element (or HTML Description List Element) encloses a list of pairs of terms and descriptions.

• Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Description lists were called definition lists in prior versions of HTML, and are created using the tags <dl>, <dt>, and <dd>.

• <dl> – is used to code a description list consisting of description terms alternating with groups of one or more detail descriptions.
• <dt> – is used to code a description term in a description list, leading into one or more detail description elements.
• <dd> – is used to code the detail description of an item inside a dl element for a description list.

Here is an example of a description list.

Here is the code:

<h3>Description List</h3>
<dl>
<dt>Unordered List</dt>
<dd>A list of items marked with bullets, much like a grocery list.</dd>
<dt>Ordered List</dt>
<dd>A list of items marked with numbers to indicate item ordering.</dd>
<dt>Description List</dt>
<dd>An association list consisting of a series of name-value groups.</dd>
<dd>In previous versions of HTML, these lists were referred to as "Definition lists".</dd>

</dl>

Since the description list is not too widely used, I'll refer you to The <dl> Tag for a Description List and <dl>: The Description List element for further discussion.

Section 5: Let's Play

Click the "Edit and Click Me >>" to see the results of the html code in the left panel in the panel on the right.

Then, play around with the html code, making changes and seeing the effect of those changes in the right panel.

Section 6: Resources

Here are some additional links about lists that you might find helpful:

• The dl element
• How to Create Lists in HTML5