Using Lists in Webpages

Information to be presented often uses lists. When you've presented this type of information on paper you probably used lists with numbered steps or "bullets." You've also written those lists with indented sections t organize the information such as terms and their definitions or in an outline form. HTML provides tags which will automatically indent text and add numbers or bullets in front of each listed item.

The Three Types of HTML Lists

There are three types of lists you can construct using HTML: The "numbered" list is called an "ordered list." It begins with an <OL> tag and ends with a closing </OL> tag. Numbers and line breaks are automatically added at each <LI> (list item) tag, and the entire list is indented. The "bulleted" list is called and "unordered list." It opens with the <UL> tag and closes with the </UL>. It looks just like an ordered list, except that bullets appear at each <LI> tag instead of numbers. A list of terms and their meanings is called a "definition list." It starts with the <DL> tag and ends with the </DL>. The <DT> goes in front of each term to be defined, with a <DD> tag in front of each definition. Line breaks and indentation appear automatically. The Ordered List

This is an Ordered List

  1. Each list item is indented
  2. Each list item is also numbered
  3. And it is done automatically.
The HTML for the above list is given here: This is an Ordered List <OL> <LI>Each list item is indented <LI>Each list item is also numbered <LI>And it is done automatically. </OL> The Unordered List

This is an Unordered List

The HTML for the above list is given here: This is an Unordered List <UL> <LI>Each list item is indented <LI>Each item has a "bullet" in front of it <LI>And it is done automatically. </UL> The "bullet" used above is the "disc." You can select among the "disc," "circle" or "square" by altering the <UL> tag by adding either <UL TYPE="disc"> or <UL TYPE="circle"> or <UL TYPE="square". The Definition List

The Definition List is a bit different and uses three basic tags.

In a definition list you have a "term"
And it is followed by a "definition" of that term.
Each time you add a "new" term
You can add a new definition.
This is the HTML for the above Definition List: <DL> <DT>In a definition list you have a "term" <DD>And it is followed by a "definition" of that term. <DT>Each time you add a "new" term <DD>You can add a new definition. </DL> You can see the "three" HTML tags used to set up the definition list are <DL> (Definition List), <DT> (Definition Term)and <DD> (Definition Definition). Of course, as with other lists you must "close" with a closing tag which in this case is </DL>. This is NOT intended to be an "all encompassing" explanation of making lists. There are many other things you can do to set up alternative layouts of lists. You can use "nested" lists, make different level "bullets" appear differently and use a combination of "numbering" which can use Roman Numerals and Arabic Numerals at different levels. For more information you should check an HTML Tutorial on Lists which will offer more advanced methods.

Main Text/Formatting Page

Main HTML Help

Site© 1996-2003 Copyright by dcrum@infionline.net