Learning HTML
Chapter 3 - More Basic HTML Tags

3.2 Tags for Creating Lists

If you browse web pages, you have probably noticed that you are more likely to scan information than read it carefully. You are not alone -- on the Web, most people tend to move quickly through text. In this environment, long paragraphs are often not the most effective way to reach a reader. Breaking information into smaller chunks can have a greater impact.

As a document structuring language, HTML provides a number of tags which allow you to create lists of information. The three main list types are: unordered, which is usually displayed as a bullet list; ordered, in which each item is numbered sequentially; and definition, which pairs a term with an indented definition.

Ordered and unordered lists begin and end with tags. Ordered lists use the tag pair <OL> </OL>. Unordered lists use <UL> </UL>. Each item in a list is then preceeded with the single tag <LI> (for list item).

Here's an example of the tags used to create a ordered list:

   Steps to create a document:<P>
   <OL>
      <LI>Type your text in an editor (Notepad)      
      <LI>Use the appropriate HTML tags
      <LI>Save document as a text file
      <LI>Open file in Netscape to view
   </OL>

The text should look like this in your browser:

Steps to create a document:

  1. Type your text in an editor (Notepad)    
  2. Use the appropriate HTML tags
  3. Save document as a text file
  4. Open file in Netscape to view

This example creates an unordered list:

   Features of HTML:<P>
   <UL>
      <LI>Controls structure of document
      <LI>Can create links to other documents      
      <LI>Can display graphics with text
   </UL>

This example should be displayed as:

Features of HTML:

Note how the list items are indented (long text will also wrap as an indented paragraph). In your document, you don't have to indent the items in a list or even place them on a separate line. All formatting in the browser is controlled by the tags. To make your document readable as you edit it, however, you might want to indent the lists as you type in Notepad.

Definition lists can be used to display items followed by an indented description of the item (such as a glossary of terms). Like ordered and unordered lists, definition lists begin and end with tags: <DL> </DL>. Instead of the list item tag (<LI>), however, definition lists use tags for terms (<DT>) and definitions (<DD>).

Here are tags used by a definition list:

   Important terms:<P>
   <DL>
      <DT>ASCII File
      <DD>A file saved as text only (not in word processing 
      format). This file format is required by HTML.
      <DT>HTML
      <DD>HyperText Markup Language. Describes a way of providing    
      instructions to WWW browsers like Netscape.
      <DT>WWW
      <DD>The World Wide Web.
   </DL>

The list will be displayed as:

Important terms:

ASCII File
A file saved as text only (not in word processing format). This file format is required by HTML.
HTML
HyperText Markup Language. Describes a way of providing instructions to WWW browsers like Netscape.
WWW
The World Wide Web.

Go back to your first document and add at least one list to it. You can create a list of reasons why you want to learn HTML, an ordered list of things to do, or some defintions of terms you have learned so far.


Learning HTML
www.dickinson.edu/~dempsey
Last updated 6/8/2001
Copyright © 2001 Paul Dempsey