Tools:

Formatting Lists

Lists give us a very powerful way to communicate information by creating an individual line for each item.

Consider a recipe for cookies or a step-by-step procedure on how to do an oil change. Lists place elements in an order that are much simpler to digest.

Two Types of Lists in HTML

There are two basic types of lists in HTML: ordered lists and unordered lists

Basic Unordered List

Unordered lists are used when you want to present a set or list of information in bullet point form.

The user does not need to be given in a specific order on how to process or understand the list. An unordered list would be useful to show a list of required items needed for a class.

A basic "Unordered List"

  • element one
  • element two
  • element three
Copy/Paste the code for an unordered list and replace placeholder text with your own:

<ul>
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
</ul>

Ordered Lists

Ordered lists contain a array of elements that in order to complete a process properly, steps must be taken in a certain order.

By default, elements in an ordered list are each labeled with a number. (1, 2, 3, and so on).

We use ordered lists when it is critical that the steps be followed in a specific order.

A basic "Ordered List"

  1. element one
  2. element two
  3. element three
Copy/Paste the code for an ordered list and replace placeholder text with your own:

<ol>
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
</ol>

Data lists

There are times when we don't want or need bullet points or numbers for each individual line element. Data Lists are great for this.

A Three Item Data List

shoelace
violin
fruit

See, no bullets or numbers preceding the items.

Copy/Paste the code for a data list and replace placeholder text with your own:

<dl>
<dt>shoelace</dt>
<dt>violin</dt>
<dt>fruit</dt>
</dl>

For a variation that includes a border between items, use:

element one
element two
element three

<dl class="bordered">
<dt>list element one</dt>
<dt>list element two</dt>
<dt>list element three</dt>
</dl>

Search This Website

To search only the Information Technology Services website, enter text in the box below, then click 'Search'.

Upcoming Training Opportunities

Contact Us

  • Web Services
  • Prescott Campus, Building 6
  • Monday-Friday, 8am - 5pm
  • Tel: (928) 717-7711
  • Fax: (928) 776-2054
  • webservices@yc.edu