Study Guide: Web Design - Lists

<<Previous

Next>>

HTML has several kinds of lists to help you organize your ideas. The unordered list typically is a list of bulleted items. The ordered list is usually a list of items labeled with numbers. There's also a definition or glossary list, which is a list of items and descriptions, for example, terms and their definitions.

Let's start with an unordered list:

Tag name	Tag	Tag Attribute	Values

Unordered list	UL	type="..."	bullet style - circle, square, disc

List item	LI	type="..."	changes bullet style - circle, square, disc

Here's an example using the list tags:

Grocery list

<LI>cheese</LI>

<LI type="square">pizza</LI>

</UL>

The UL tag marks the beginning and end of the list, while the LI tags mark the beginning and end of each item in the list. The ordered list works similarly:

Tag name	Tag	Attribute	Values

Ordered list	OL	start="..."	sets the starting number
		type="..."	numbering style - 1, a, A, i, I

List item	LI	type="..."	changes numbering style - 1, a, A, i, I
		value="..."	sets the number to the given integer

Here are a few examples of ordered lists:

The varieties of apples grown at Granny's orchards

<OL>

<LI>Granny Smith</LI>

<LI>Ginger Gold</LI>

<LI>Red Delicious</LI>

<LI>Braeburn</LI>

</OL>

An attribute of type="A" in the OL tag would number the list with A., B., C., D., and E. instead of numbers. You could also use lowercase letters or Roman numerals. You could change this with a type attribute for any list item.

Suppose you wanted to start numbering a list at certain point:

Some things to do before starting homework:

<LI>Feed goldfish</LI>

<LI>Test gravitational theory</LI>

<LI>Sort socks</LI>

<LI>Write a web page</LI>

</OL>

To make a list of items and descriptions, you could use a glossary or definition list. A definition list consists of a list of definition terms and

definition definitions. The three tags necessary are:

Tag name	Tag

Definition list	DL
Definition term	DT
Definition definition	DD

Here are some examples of how you might use a definition list:

<DL>

<DT>Granny Smith apple</DT>

<DD>A bright green color when ripe, crisp texture, tart and sour flavor.</DD>

<DT>Ginger Gold apple</DT>

<DD>Light green-yellow in color with a slight red blush when ripe, crisp texture, sweet, tangy and juicy flavor.</DD>

<DT>Fuji apple</DT>

<DD>Color varies from yellow-green with red highlights to mostly red, firm and crisp texture, sweet and juicy flavor </DD>

</DL>

<DL>

<DT>Villian</DT>

<DT>Damsel</DT>

</DL>

You might have reason to embed one list inside another. You could create an outline in this manner.

Exercise: Incorporate a list into your page. Choose any kind of list you like. Save your work and view your results in a browser. Try to look at your page in different browsers if you can.