List Tags

There are three types of lists defined in HTML. In this section, we will cover all three types of lists:

Unordered
Ordered
Definition

Unordered Lists

An unordered list is an indented, bullet list. To create an unordered list:

Start with an opening unordered list tag <UL>
For each item in the list, enter a <LI> tag followed by the list item
End with a closing unordered list tag </UL>

An example follows.

Example:

<H3>Several Fruits</H3>
<UL> 
	<LI>Bananas
	<LI>Oranges
	<LI>Apples
</UL>

This is what you would see in Internet Explorer.

Several Fruits

Bananas
Oranges
Apples

You can put other HTML tags in a list item including LINE BREAKs, PARAGRAPHs, IMAGEs, LINKs, and even other LISTs. A LIST within a LIST is called a nested LIST. The HTML code for a nested LIST looks like this.

<UL>
	<LI>Fruits
	<UL>
		<LI>Bananas
		<LI>Oranges
		<LI>Apples
	</UL>
	<LI>Vegetables
	<UL>
		<LI>Green Beans
		<LI>Carrots
		<LI>Broccoli
	</UL>
</UL>

This is how the nested LIST would appear in Internet Explorer.

Fruits
- Bananas
- Oranges
- Apples
Vegetables
- Green Beans
- Carrots
- Broccoli

You Try It

Using Notepad, open "mod2.htm". Add an unordered list to your code. The list could be, but does not need to be, a list of the courses that you teach. Save your document as "mod3.htm".

Next, go to Internet Explorer to preview your document in progress. Click on File, then Open File. Choose the disk drive, directory, and the file named "mod3.htm" to open.

You should see everything from the last lesson as well as the newly inserted unordered list.

Ordered Lists

Ordered lists are sometimes called numbered lists. They are identical to the unordered list except you use the
<OL> . . . </OL>
list tags and the list items will be numbered rather than bulleted.

An example follows.

Example:

<H3>Several Fruits</H3>
<OL> 
	<LI>Bananas
	<LI>Oranges
	<LI>Apples
</OL>

This is what you would see in Internet Explorer.

Several Fruits

Bananas
Oranges
Apples

You Try It

Using Notepad, open the file named "mod3.htm". Add a numbered list to your document. Try to choose something that would naturally be numbered rather than bulleted. Save your document giving your file the same name as before, "mod3.htm".

Next, go to Internet Explorer to preview your document in progress. Click on File, then Open File. Choose the disk drive, directory, and the file named "mod3.htm" to open.

You should now see both your lists on the screen along with the information from the previous lesson.

Definition Lists

A definition list usually is created by alternating a Term <DT> and a Definition <DD>. Most browsers, including Internet Explorer, format the definition on a new line.

Here is an example.

Example of HTML Code

<DL>
<DT>URL
<DD>Uniform Resource Locator
<DT>HTML
<DD>Hypertext Markup Language
<DT>WWW
<DD>World Wide Web
</DL>

What you would see in Internet Explorer

URL: Uniform Resource Locator
HTML: Hypertext Markup Language
WWW: World Wide Web

There is an attribute that may be used with the <DL> tag. This attribute is compact. Using this attribute decreases the spacing in some manner between adjacent terms and definitions (usually either with font size or spacing). However, this attribute is interpreted very differently on different platforms and in different browsers. Some will even ignore the attribute.

Example of HTML Code

<DL compact >
<DT>URL
<DD>Uniform Resource Locator
<DT>HTML
<DD>Hypertext Markup Language
<DT>WWW
<DD>World Wide Web
</DL>

What you would see in Internet Explorer

URL: Uniform Resource Locator
HTML: Hypertext Markup Language
WWW: World Wide Web

You Try It

Using Notepad, open the file named "mod3.htm". Add an appropriate Definition List to your document. Save your document giving your file the same name as before, "mod3.htm".

Next, go to Internet Explorer to preview your document in progress. Click on File, then Open Page and the Choose File button. Choose the disk drive, directory, and the file named "mod3.htm" to open.

You should see your three lists and the information from the previous lesson. When you are satisfied that your HTML is correct, you should e-mail the file named "mod3.htm" to the instructor.

Back to the top of this page.

Back to Learning Modules.