HTML Lists

Lists can be used to make content easier to scan and read, or can help your user understand that the content should be read or instructions should be followed in a specific order. These offer accessibility benefits for those using screen readers by telling them how many items there are in the list.

Your book includes information about the list elements shown below.

<ol></ol> – ordered list (this will display with numbers, indicating a specific order for the items in the list)
<ul></ul> – unordered list (this will display with bullets, the items do not need to be read in order
<li></li> – list items (for both types of lists, these tags will surround each item in the list, whether it’s ordered or unordered)

There is also another type of useful list in HTML, the description list. This list is used to organize content where there is some sort of term or other text that has one or more definitions or descriptions. It uses the elements shown below.

<dl></dl> – description list (this list will not include any type of markers, like numbers or bullets)
<dt></dt> – description term (this will not display with any special styling)
<dd></dd> – description details (this will display with left margin, so that it is indented under the term it belongs to)

List Examples:

Unordered List (uses bullets by default):

<ul>
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ul>

Appearance in the Browser:

First list item
Second list item
Third list item

Ordered List (uses numbers by default):

<ol>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
</ol>

Appearance in the Browser:

First list item
Second list item
Third list item

Description List (uses no markers by default):

<dl>
    <dt>First Term</dt>
    <dd>Definition for first term</dd>

    <dt>Second Term</dt>
    <dd>Definition for second term</dd>
    <dd>Another definition for second term</dd>

    <dt>Third Term</dt>
    <dd>Definition for third term</dd>
</dl>

Appearance in the Browser:

First Term: Definition for first term
Second Term: Definition for second term; Another definition for second term
Third Term: Definition for third term

Nesting Lists:

For each sub-topic that needs to be included after a list item text, you will add another list and list items inside of the parent list item. The example below shows unordered lists, but you can use this on any list, and can even mix types with an unordered list inside of an ordered list, for example.

<ul>
  <li>
    First list item
    <ul>
        <li>First nested list item</li>
        <li>Second nested list item</li>
        <li>Third nested list item</li>
    </ul>
  </li>
  <li>Second list item</li>
  <li>Third list item</li>
</ul>

Appearance in the Browser:

First list item
- First nested list item
- Second nested list item
- Third nested list item
Second list item
Third list item