Blogging / Et Al / Technical Writing

Blogging with Lists, Part III: Nested & Definition Lists

We’ve been blogging with lists for the last few weeks, and we’ve already learned how to determine when it’s appropriate to use a list and how to write a list; we learned those week one. Last week, we learned how to use, code, and style ordered and unordered lists. This week, we’re discussing definition and nested lists.

Using a Nested List
We’re starting with nested lists for two reasons: they build on what we learned last week and are pretty simple to understand. Nested lists work best when you need sublists, when you’re creating an outline, and when you want to use paragraphs inside your list, and they can use any combination of ordered and unordered lists; you can use all unordered, all ordered, or a combination. Your nested list might look like this:

  1. Item 1
    • Sub-item 1
    • Sub-item 2
    • Sub-item 3
  2. Item 2
    • Sub-item 1
    • Sub-item 2
      • Sub-sub-item 1
      • Sub-sub-item 2
      • Sub-sub-item 3
    • Sub-item 3
  3. Item 3
    • Sub-item 1
    • Sub-item 2
    • Sub-item 3

Here’s what the list above looks like in HTML:

<ol>
<li>Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2
<ul>
<li>Sub-sub-item 1</li>
<li>Sub-sub-item 2</li>
<li>Sub-sub-item 3</li>
</ul>
</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ol>

Just like Russian nesting dolls, nested lists are completely contained within a bigger element: a list item. List items always begin and end with <li></li> tags, but if you’re nesting a list within it, the list item doesn’t close until the nested list is complete. Let’s look at Item 2. Note that the Item 2 <li></li> tags completely enclose the lists (including their <ul></ul> tags) within it.

You can also nest paragraphs inside ordered and unordered lists. Make sure you completely contain your paragraph tags within your list-item tags. Your nested list with paragraphs might look like this:

  • Item 1
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.
  • Item 2
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.
  • Item 3
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.

And it’s HTML would look like this:
<ul>
<li>Item 1
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
<li>Item 2
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
<li>Item 3
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis iaculis blandit est. Nulla facilisi. In dolor neque, tempus quis, adipiscing id, pretium non, arcu.</p>
</li>
</ul>

Easy, huh?

Using a Definition List

Definition lists are completely different from unordered, ordered, and nested lists, so file all that old information away for a few minutes. Definition lists pair terms with their descriptions or definitions and are useful for glossaries, questions/answers, and other bits of information that come in pairs. Your definition list might look like this:

Term 1
Term 1 definition A
Term 1 definition B
Term 2
Term 2 definition
Term 3
Term 3 definition

In HTML, this list looks like this:

<dl>
<dt>Term 1</dt>
<dd>Term 1’s definition A</dd>
<dd>Term 1’s definition B</dd>
<dt>Term 2</dt>
<dd>Term 2’s definition</dd>
<dt>Term 3</dt>
<dd>Term 3’s definition</dd>
</dl>

Note that the HTML of a definition list differs from that of unordered and ordered lists. While definition lists are similar to unordered and ordered lists by opening and closing with <dl></dl> tags (dl stands for definition list), the list items within them are not. Definition lists come in two parts: the defined term (<dt></dt>) and the term definition (<dd></dd>). These two parts are not nested but come one after the other, and just like a word in the dictionary can have multiple definitions, a defined term can have multiple definitions below it.

Yes, nested and definition lists are a bit more complicated than ordered and unordered lists, but the principles behind all of them are essentially the same. Using what we learned in the first post about when to use a list and how to write one, we are now fully equip to use unordered, ordered, definition, and nested lists in our writing. Happy listing!

Previous List Posts

—–
Image Source

Advertisements