	yc website people courses
	maps e-services\| contact us\| campuses\| calendars\| blackboard\| a - z index\|

Future Students Current YC Students Faculty & Staff Lifelong Learners Community & Visitors

Yavapai College > Information Technology Services > Web Services > Web Author Training Resources > 4. Lists

Formatting Lists

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

Compare a list of instructions or features to a paragraph that contains the same elements, and you will be able to comprehend and will be likely to remember and scan through a list more efficiently.

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 items in an unordered list are relatively equal to each other in terms of each element appearing in a single list. 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.

element one
element two
element three
element four
element five

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

Ordered Lists

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

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

By default, elements in an ordered list are each labeled with a number. (1, 2, 3, and so on). If we do not define the class of our list, we will get a numbered list.

We have the ability to present our ordered lists in several different order presentation patterns, the following examples with codes, show us the choices available:

A basic "Ordered List"

element one
element two
element three
element four
element five

The following shows the code for an ordered list

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

Data lists

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

A Six Item Data List with Sub Lists

shoelace
violin
fruit: - orange; - apple; - banana
currency: - $2; - $50; - $100
city: - Chicago; - Los Angeles; - Prescott
state: - relaxed; - comfortable; - attentive

The following shows the code for a data list

<dl>
<dt>shoelace</dt>
<dt>violin</dt>
<dt>fruit</dt>
<dd>- orange</dd>
<dd>- apple</dd>
<dd>- banana</dd>
<dt>currency</dt>
<dd>- $2</dd>
<dd>- $50</dd>
<dd>- $100</dd>
<dt>city</dt>
<dd>- Chicago</dd>
<dd>- Los Angeles</dd>
<dd>- Prescott</dd>
<dt>state</dt>
<dd>- relaxed</dd>
<dd>- comfortable</dd>
<dd>- attentive</dd>
</dl>

Example of an Upper Roman List

element one
element two
element three
element four
element five

<ol class="uRoman">
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
<li>list element four</li>
<li>list element five</li>
</ol>

Ordered List - Lower Roman (i,ii,iii)

element one
element two
element three
element four
element five

<ol class="lRoman">
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
<li>list element four</li>
<li>list element five</li>
</ol>

Ordered List - Upper Alpha (A,B,C)

element one
element two
element three
element four
element five

<ol class="uAlpha">
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
<li>list element four</li>
<li>list element five</li>
</ol>

Ordered List - Lower Alpha (a,b,c)

element one
element two
element three
element four
element five

<ol class="lAlpha">
<li>list element one</li>
<li>list element two</li>
<li>list element three</li>
<li>list element four</li>
<li>list element five</li>
</ol>