Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2020

## Lists - ul and li

Lists are very useful, both for:

- Content
- Navigation

There are three types of lists:

- Unordered (most common)
  `ul` and `li`
- Ordered
  `ol` and `li`
- Dictionary (rare)
  `dl`, `dt`, and `dd`

Links to the HTML5 documentation for these elements:
ul , li , ol , dl , dt , dd

Example 2.3 - Unordered List - Example 2.3

- Markup
- Display

    <ul>
    <li>Tea</li>
    <li>Bread</li>
    <li>Cheese</li>
    <li>Chips</li>
    <li>Ice Cream</li>
    </ul>

- Tea
- Bread
- Cheese
- Chips
- Ice Cream

Example 2.4 - Nested Unordered List - Example 2.4

- Markup
- Display

    <ul>
    <li>Tea<ul>
    <li>Kenyan</li>
    <li>Sikkim</li>
    <li>Ceylon</li>
    <li>Assam</li>
    <li>Oolong</li>
    </ul></li>
    <li>Potato Chips<ul>
    <li>Dirty's</li>
    <li>Art's and Mary's</li>
    <li>Tim's Cascade</li>
    <li>Cape Cod</li>
    </ul></li>
    </ul>

- Tea
  - Kenyan
  - Sikkim
  - Ceylon
  - Assam
  - Oolong
- Potato Chips
  - Dirty's
  - Art's and Mary's
  - Tim's Cascade
  - Cape Cod

Example 2.5 - Ordered List - Example 2.5

- Markup
- Display

    <ol>
    <li>Boil water</li>
    <li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li>
    <li>Steep tea for 3 to 5 minutes</li>
    <li>Enjoy!</li>
    </ol>

1. Boil water
2. Measure tea (approximately 1 tsp. per 6 oz. cup)
3. Steep tea for 3 to 5 minutes
4. Enjoy!

Example 2.6 - Dictionary Lists (terms and definitions) - Example 2.6

- Markup
- Display

    <dl>
    <dt>bread</dt>
    <dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal</dd>
    <dt>butter</dt>
    <dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food</dd>
    </dl>

bread
  a usually baked and leavened food made of a mixture whose basic constituent is flour or meal
butter
  a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food

Copyright © David Heitmeyer