CCmahoni's HTML and Graphics Shoppe-List Tags By: CCmahoni

HTML page

List Tags By: Mary Ann Hetrick

Main
Site Navagation

HTML Tutorials
FTP Tutorials

Lists are one of the most useful, and versatile tags in HTML. You can use them for making your information stand out, indenting your text, and organizing your text.

The three types of lists are Ordered , Unordered , and Definition.
The Basic List Tag Pairs are:

 
<OL> for Ordered Lists
With the closing tag of </OL>
 
<UL> for Unordered Lists
With the closing tag of </UL>
 
<DL> for Definition Lists
With the closing tag of </DL>


Ordered Lists

To make a table of contents for your page, you can also nest several lists. There are two attributes for the Ordered list tag: TYPE and START, each will have a value for that attribute.

The value of the TYPE attribute can be: A for capital letters, a for small letters, I for Capital roman numbers, i for small roman numbers, and 1 for numbers which is the default value for this attribute.

The value of the START attribute is to indicate where the list numbering or lettering should begin, so you don't have to start at 1 or A

The second tag used in the Ordered and Unordered lists is the <LI>, or List Item Tag.
This is what a Ordered List will look like in your code:
<OL TYPE="I" START="5">
<LI>Beginning Genealogy
<LI>Intermediate Genealogy
<LI>Advanced Genealogy
<LI>More Resources
</OL>

This is what it will look like when viewed by a browser:

  1. Begining Genealogy
  2. Intermediate Genealogy
  3. Advanced Genealogy
  4. More Resources

Here is how you write a nested list. By making sure you close each list. with a </OL>.

<OL TYPE="I" START="1">
<LI>Basic Genealogy
<OL Type="1" START="1">
<LI>The Pedigree
<LI>The Family Group Sheet
</OL>
<LI>Intermediate Genealogy
<OL TYPE="1" START="3">
<LI>Pick the object of your search
<LI>What tools to use for your search
<:/OL>
<LI>Advanced Genealogy
<OL TYPE="1" START="5">
<LI>Where to continue your search
<LI>What to do about that Brick Wall
</OL>

Here is what it looks like in a browser:

  1. Basic Genealogy
    1. The Pedigree
    2. The Family Group Sheet
  2. Intermediate Genealogy
    1. Pick the object of your search
    2. What tools to use for your search
  3. Advanced Genealogy
    1. Where to continue your search
    2. What to do about that Brick Wall

Return to top of Page

Unordered Lists

The Unordered list is like the Ordered list, except it used when the order of the items is not inportant, or where sequence doesn't apply.

The value of the TYPE attribute for the Unorders List is a shape. The shapes are in this order disc, circle, and square. This is the order of the defaults for each level of lists.

You can also use the <br> Break tag to place a line of text to start at the same indentation as the List Item.

Example of Code for a basic Unordered List:
<UL>
< LI> a text item here.
<LI> another text item here.
</UL>
 
this is what it will look like to the visitor:
  • a text item here.
  • another text item here.

Here is an example that uses the <BR> tag to place another line with the same indenting.
<UL>
<LI> a text item here.
<BR>
(something about the text item)
<LI> another text item here. <BR>
(someting about the other text item)
</UL>
Looks like this in the browser:

  • a text item here.
    (something about the text item)
  • another text item here.
    (someting about the other text item)
Return to top of Page

Definition Lists

The Definition Lists; <DL> and closer </DD> ,are used for lists that have a block of indented text, or other associated tearms. The Defintition List doesn't use the <LI> tag. It uses insted the <DD>, or Definition Discription tag, and the <DT>, or Defintion Term tag.

The <DD> tag indents the text,</DD> is the closer.
The <DT> tag does not indent the text, it has no closer.

This is how the code will look for a simple Definition List:

<DL>
<DT>Genealogy
<DD>The study of ones ancestors, through research and documentation.</DD> <DT>Sources
<DD>Original materials that provied written proof of names, dates & locations; like BirthCertificates & Death Certificates</DD>
</DL>

This is how it would look in your browser:

Genealogy
The studyof ones ancestors, through research and documentation
Sources
Original materials that provide written proof of names, dates & locations: like BirthCertificates & Death Certificates

There is one attribute for the <DL> Tag, this is the COMPACT attribute, it reduces the space between leading line and the next item in the list.

This is how it would look in your browser:

Genealogy
The studyof ones ancestors, through research and documentation
Sources
Original materials that provide written proof of names, dates & locations: like BirthCertificates & Death Certificates

Return to top of Page

List of My Counties

  1. Colorado Counties
  2. Other web pages I help take care of

Return to top of Page

Examples of Lists

Return to top of Page


|| HTML Index || Beginning HTML || Formating Text || List Tags ||


Return to CCmahoni HTML and Graphics Shoppe
Return to COGenWeb Page.


About the Webmaster

You are the  page counter  Vistior to this page.

This Page Was Last Updated: Saturday, 08-Sep-2018 00:47:56 MDT

The Date is  date The time is  time  EST.

copyright © 1999, 2000 Mary Ann Hetrick [email protected]

Graphics on this page
Link to the PSP Homepage.
The HTML Writers Guild