An important HTML tag type is the List. HTML supports three types of lists: ordered lists, unordered lists, definition lists.
All lists begin and end with an implicit <P> and, except for the definition list (see below), they all take the form:

<OPEN LIST>
<LH> Optional list header </LH>
<LI> Item in the list </LI>
...
<LI> Item in the list </LI>
<CLOSE LIST>

Ordered Lists use <OL> to open the list and </OL> to close the list.

  1. The items in an ordered list look like this.
  2. But the list doesn't have to be numbered!
  1. <OL TYPE=A> causes the list
  2. to be lettered in CAPS
  1. <OL TYPE=a> causes the list
  2. to be lettered in lower case
  1. <OL TYPE=I> causes the list
  2. to be numbered with large Roman Numerals
  1. <OL TYPE=i> causes the list
  2. to be numbered in small Roman Numerals
  1. And you can even start somewhere
  2. other than the beginning with <OL START=##>,
  3. where ## is the starting number. (Translate letters and numerals into their corresponding numbers, i.e. E=5, b=2, III=3, etc.)
NOTE: The above stuff about TYPE and START is HTML 2.0 and might not be recognized by Netscape 2.0.
What follows is the HTML 3.0 equivalents, but they may not be recognized by any browser!

To start the numbering at a specific place, add SEQNUM=num to the <OL ... > tag, where num is the number to start the numbering with.
Adding CONTINUE to the <OL ... > tag will pick up the numbering of this list where the last list left off.

So, a list starting at 49 would look like this:

<OL SEQNUM=49>
...
</OL>

Unordered Lists use <UL> </UL> to open and close the list.

NOTE: The above stuff about TYPE is HTML 2.0 and might not be recognized by Netscape 2.0.
Just as with ordered lists, what follows is the HTML 3.0 equivalents, but they also may not be recognized by any browser!

The unordered list can be modified by adding tags to the opening <UL ... > tag. Adding PLAIN will create a list with no bullets.
Adding WRAP= will make your list "wrap" into columns. WRAP=vert will make the list start a new column after reaching the bottom of the page. WRAP=horiz will make the list divide into as many columns as the page has room for.
To use some other image instead of the standard bullet, include SRC="picture", where picture is a link to the image you want to use. (See the next lesson: images)

An unordered list with no bullets that wraps vertically would look like this:

<UL PLAIN WRAP=vert>
...
</UL>

NOTE: Here's a neat trick. If you want something indented, you can use and unordered list. Just put your text in an unordered list with no list items.

Example:

<UL>

</UL>

Definition lists are two-part lists, useful for things like glossaries or defining lists of terms. <DL> </DL> is used to open and close the list. The list items have two parts: the term and the definition. The definition term is enclosed in <DT> </DT> and should precede the definition definition. The definition definition is enclosed in <DD> </DD>. A list header can also be added as with the other list types. So, the whole thing looks like:

<DL>
<LH> list header <DL>
<DT> term </DT> <DD> definition </DD>
...
<DT> term </DT> <DD> definition </DD>
</DL>

NOTE: The definition term and the definition definition do NOT have to be on the same line like in the example.

Definition List:
This is how they look when viewed with a browser.
Their Use:
They are useful for any list shaped like this!

One useful feature of lists is that they can be nested, i.e. one lists is a List Item of another list, like this:

<UL>
<LI>You can have one list...</LI>
<OL>
<LI>Inside of another list...</LI>
<OL TYPE=A>
<LI>Inside of another!</LI>
</OL>
</OL>
</UL>

Which looks like this:

Tables are 2-dimesional lists. They are coded similarly to definition lists. They have an implicit <BR> at the beginning and end. The format is:

<TABLE>
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
...
<TR> <TD> Table Entry </TD> ... <TD> Table Entry </TD> </TR>
</TABLE>

Each row is encapsulated in <TR> </TR>. Within the row are cells, enclosed in <TD> </TD>. The whole table is opened and closed with <TABLE> </TABLE>. There can be as many rows and columns as you want and as will fit on the screen. The browser will autoformat the rows, vertically centering cell contents if necessary.
If you want a cell to span more than one column, enclose it in <TD COLSPAN=##> </TD>, where ## id the number of columns to span. Similarly, <TD ROWSPAN=##> </TD> will cause the cell to span ## rows.
A border can the placed around all the cells by using <TABLE BORDER=##> </TABLE>, where ## is the number of pixels thick the border should be.

Tablescancontain
anyamountof
INFORMATION!!!
INFORMATION

<TABLE BORDER=1> <TR><TD>Tables</TD><TD>can</TD><TD>contain</TD></TR> <TR><TD>any</TD><TD>amount</TD><TD>of</TD></TR> <TR><TD COLSPAN=2>INFORMATION</TD><TD ROWSPAN=2>!!!</TD></TR> <TR><TD COLSPAN=2>INFORMATION</TD></TR> </TABLE>

Centering can be accomplished with the <CENTER> </CENTER> tags,

<CENTER>Like this!</CENTER>

NOTE: Structures such as centering, tables, lists and headings sometimes ignore formatting applied outside of the structure's limits. So,
<B><CENTER> text </CENTER></B> may not make "text" bold.
<CENTER><B> text</B> </CENTER> may be needed in this case.

The next lesson is Links.

Take the Structures Pop Quiz

Return to the Menu