Lists

Lists are a great way to organize short key points. If you are going to use a list, make sure the content is formatted with HTML list tags and not just visually formatted. Lists should not be used for large amounts of information in paragraph form. In that case, it is better to use headings. There are several different types of lists:

Ordered List

An ordered list is used for content that needs to be presented in a certain order, such as steps in a process.

 

Unordered List

An unordered list is used for a list of items with no particular order of chronology or importance.

 

Outline List

Both ordered and unordered lists can be used for outline or nested lists, which are lists with more than two levels of content.

 

Definition or Description List

A definition list is used for terms and definitions and lists with longer sections of text.

 

List Examples With Code

Definition or Description List Example

Using a list can be a good way to style key terms and their definitions at the start or the end of a lesson. The list given above is an example of a definition list. If you use a list format for key terms and definitions, be sure to use a definition list style markup.

Evolution has a built-in style available that can be used to easily create definition or description lists. Visit the Description List Instructions Links to an external site. in WCLD 101 to learn more.

If you are using another platform besides Evolution, you can use the code below to create your list.

<dl>
  <dt>Ordered List
  </dt>
  <dd>An ordered list is used for content that needs to be presented&nbsp;in a certain order, such as steps in a process.<span></span>
  </dd>
  <dt>Unordered List
  </dt>
  <dd>An unordered list is used for a list of items with no particular order of chronology or importance.<span></span>
  </dd>
  <dt>Outline List
  </dt>
  <dd>Both ordered and unordered lists can be used for outline&nbsp;or nested&nbsp;lists, which are lists with more than two levels of content.
  </dd>
  <dt>Definition List
  </dt>
  <dd>A definition list is used for terms and definitions and lists with longer sections of text.
  </dd>
  <dd>&nbsp;
  </dd>
</dl>

Unordered List Example

What follows is an unordered list that is coded correctly.

The following are important font considerations:

• style
• size
• scalability
• contrast
• color

<p>
  The following are important font considerations:
</p>
<ul>
  <li>style</li>
  <li>size</li>
  <li>scalable</li>
  <li>contrast</li>
  <li>color</li>
</ul>

Ordered List Example

The following is a correctly coded ordered list.

Follow these steps to cook a toaster pastry:

1. Remove pastry from wrapping.
2. Put pastry in toaster.
3. Turn the toaster on.
4. When the toaster is done, carefully remove the pastry with tongs.
5. Put pastry on a plate to cool.
6. Eat pastry.

<p>
Follow these steps to cook a toaster pastry:
</p>
<ol>
  <li>Remove pastry from wrapping.</li>
  <li>Put pastry in toaster.</li>
  <li>Turn the toaster on.</li>
  <li>When the toaster is done, carefully remove the pastry with tongs.</li>
  <li>Put pastry on a plate to cool.</li>
  <li>Eat pastry.</li>
</ol>

Outline List Example

When using outline lists, be sure to use a different numbering or lettering system for each level to help users (both with and without screen readers) understand the content. 

To create an outline list, choose the Insert/Remove Numbered List button and use the Increase Indent button to create the levels. (See Figure 3.)

Other outline style options are available in the Styles menu. For details, see the Bullet and Numbering Styles Links to an external site. topic in the WCLD 101 course template style guide.

Note: Although our styles allow up to five levels in an outline list, you should rethink a list that employs that many levels. A list with too many levels can create cognitive overload in people who use screen readers.

Below is an example of the correct standard format for an unordered outline list. It is the default in our Simple Editor. You can also use an alpha-numeric list style if you prefer.

• Describe the three primary colors: red, blue, and yellow.
  • Identify things that are red:
    • clowns' noses
    • roses
  • Identify things that are blue:
    • the sky
    • the ocean
    • robins' eggs
  • Identify things that are yellow:
    • the sun
    • a sunflower
    • butter
• Describe the secondary colors: purple, orange, and green.
  • Define purple:
    • The Color Purple
    • Prince
  • Compare orange and green.

<ul>
  <li>Describe the three primary colors: red, blue, and yellow.
    <ul>
      <li>Identify things that are red:
        <ul>
          <li>clowns&#39; noses</li>
          <li>roses</li>
        </ul>
      </li>
      <li>Identify things that are blue:
        <ul>
          <li>the sky</li>
          <li>the ocean</li>
          <li>robins&#39; eggs</li>
        </ul>
      </li>
      <li>Identify things that are yellow:
        <ul>
          <li>the sun</li>
          <li>a sunflower</li>
          <li>butter</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Describe the secondary colors: purple, orange, and green.
    <ul>
      <li>Define purple:
        <ul>
          <li><em>The Color Purple</em></li>
          <li>Prince</li>
        </ul>
      </li>
      <li>Compare orange and green.</li>
    </ul>
  </li>
</ul>

Updated February, 2020