Lists

Lists provide a way to order and structure sections of text.

Unordered lists

Use unordered (or bulleted) lists when the order of the items doesn’t matter.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Flour</li>
</ul>
  • Milk
  • Bread
  • Eggs
  • Flour

You can nest lists.

  • Python
  • Java
  • Front-end
    • HTML
    • CSS
    • JavaScript
    • Images
  • PHP

Ordered lists

Use ordered (or numbered) lists when the order of the items does matter.

<ol>
  <li>First do this</li>
  <li>Then do this</li>
  <li>Finally, do this</li>
</ol>
  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

Use the type attribute to change the numbering scheme:

  • 1 for numbers (default)
  • A for uppercase letters
  • a for lowercase letters
  • I for uppercase Roman numerals
  • i for lowercase Roman numerals
  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

Nested ordered lists restart their count values for the new list.

  1. One
  2. Two
  3. Three
    1. Aye
    2. Bee
    3. Cee
    4. Dee
  4. Four
  5. Five
  6. Six

It’s OK to mix and match list types.

  1. One
  2. Two
  3. Three
    • Firefly
    • Star Wars
    • Star Trek
    • Babylon 5
    • Blake’s 7
  4. Four
  5. Five
  6. Six

Use the start attribute to change the order start value. This is useful for when you need to split lists. It takes a number value, regardless of what the type attribute is set to.

  1. Eleven
  2. Twelve
  3. Thirteen

Use the reversed attribute for a count down to one.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

If you use a start value and reversed, the list can count down into the negatives.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

List item

Use the <li> element for list items in ordered or unordered lists.

<ol>
  <li>List item one</li>
</ol>

Use the value attribute to change the value of the item number. If there is no value attribute on the next item, the list will resume the count at that number.

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
  6. Six
  7. Seven
  8. Eight
  9. Nine
  10. Ten

Definition lists

Use definition lists to define key-value pairs. This is great for glossaries.

<dl>
  <dt>Term</dt>
  <dd>Descriptor</dd>
  <dt>Term</dt>
  <dd>Descriptor</dd>
</dl>