Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

The HTML Pocket Guide: Lists

📄 Contents

  1. Nested Lists
  2. dd
  3. dl
  4. dt
  5. li
  6. ol
  7. ul
  • Print
  • + Share This
HTML affords you three list types: definition list (dl), ordered list (ol), and unordered list (ul). Bruce Hyslop explains each in depth in their respective entries in this chapter.
This chapter is from the book

This chapter is from the book

Lists are one of the most commonly used semantic elements across the Web. This is particularly true of unordered lists, which are ubiquitous as the choice for marking up navigation and many other groups of links.

Before I explain each list-related element, I'll discuss a capability that is common to all lists: nesting.

Nested Lists

Lists can be nested within other lists, as shown in the following example that details a sequenced plan to relocate. In this case, it's an ordered list inside another one, though you can nest any type of list within any other type (see the dl entry in this chapter for a related note).

   <li>Take an Italian Berlitz course.</li>
   <li>Move to Italy.
      <!-- Start nested list -->
         <li>Have a yard sale.</li>
         <li>Pack what's left.</li>
         <li>Ship boxes.</li>
         <li>Jump on plane.</li>
      <!-- end nested list -->
   </li><!-- close list item containing nested list -->
   <li>Say &ldquo;Ciao!&rdquo; upon landing.</li>

This displays by default in most user agents as shown here:

  1. Take an Italian Berlitz course.
  2. Move to Italy.
    1. Have a yard sale.
    2. Pack what's left.
    3. Ship boxes.
    4. Jump on plane.
  3. Say "Ciao!" upon landing.

There's one simple but important rule to follow when nesting lists: You must insert the nested list inside an li element (or dd element in the case of a definition list) of the parent list. That is, putting the list alongside a parent li or dd is invalid.

Also, although this example shows only one level of nesting, you can also nest a list inside a nested list (and another inside that one, ad infinitum). For example, I could nest an unordered list (a ul, as you'll recall) in the "Pack what's left" li to list all items to pack, irrespective of packing order.

  • + Share This
  • 🔖 Save To Your Account