List Tags

Return to Main Page of Ted’s HTML Tutorial

Lists commonly are found in documents, including web pages. They are an easy and effective way to itemize such things as elements, components, or ingredients.

Words or phrases which need to be set apart from the rest of the body of text can be emphasized with a “bullet” (a heavy dot used for calling attention to a particular section of text). An empty tag called a “list” tag is used to do this:

<LI>: creates a bullet in front of text which is to be set apart for emphasis and causes all text after it to be indented, either until another list tag is detected or until the end of the list is reached. It is used to itemize elements of “unordered” and “ordered” lists. Note: A tag is not inserted at the end of an item beginning with a <LI> tag, as a line break automatically occurs at that point.

Since a list tag is an empty tag (that is, there is no negating counterpart </LI>), and since it indents the text following it, it cannot be alone; otherwise, the entire remainder of the document would be indented.

Therefore, list tags (<LI>) must be incorporated between two non-empty tags. One such pair of tags is called “unordered list” tags:

<UL>unordered list</UL>: delineates a list, where the items are generally of equal importance and do not need to go in any particular order. Each item begins with a <LI> tag. Unordered lists may be nested inside unordered lists or inside any other types of lists (one list inside of another list inside of another list). A line space automatically is inserted before and after an unordered list (that is, an entire line is skipped between an unordered list and any text before and after it), except for (on most browsers) a list nested within another list.

The initial <UL> tag may contain within it this parameter as part of the command:

TYPE="DISC"|"SQUARE"|"CIRCLE": designates the appearance of the bullets preceding the listed items. Many browsers support only the "DISC" attribute. "DISC" causes each bullet to appear as a solid, round disc.
"SQUARE" causes each bullet to appear as a solid square. (Many browsers do not recognize the "SQUARE" attribute.)
"CIRCLE" causes each bullet to appear as an empty circle. (Many browsers do not recognize the "CIRCLE" attribute.)
Note: On some browsers, "DISC" is the default bullet. On other browsers, "CIRCLE" is the default bullet.

Here, items in an unordered list are accentuated: During a routine eye examination, a pathology within the body sometimes can be detected in the eye, especially if the disease process is in a moderate to advanced stage. Here are 2 such cases, along with their intraocular signs:
<UL TYPE="CIRCLE">
<LI>diabetic retinal signs:
<UL TYPE="SQUARE">
<LI>CSME (clinically significant macular edema)
<LI>cotton wool spots (infarcted areas)
<LI>neovascular formation
<LI>blot and dot hemorrhages
</UL>
<LI>hypertensive (high blood pressure) retinal signs:
<UL TYPE="SQUARE">
<LI>blood vessel crossing defects (arteries compressing veins)
<LI>exudative changes in and around the macula ("star-burst" pattern)
<LI>hemorrhages
<LI>narrowing of retinal arterioles, including the "boxcar" effect
</UL>
</UL> and would be marked up like this: During a routine eye examination, a pathology within the body sometimes can be detected in the eye, especially if the disease process is in a moderate to advanced stage. Here are 2 such cases, along with their intraocular signs:

diabetic retinal signs:

CSME (clinically significant macular edema)
cotton wool spots (infarcted areas)
neovascular formation
blot and dot hemorrhages

hypertensive (high blood pressure) retinal signs:
- blood vessel crossing defects (arteries compressing veins)
- exudative changes in and around the macula ("star-burst" pattern)
- hemorrhages
- narrowing of retinal arterioles, including the "boxcar" effect
Note: If circular bullets and/or square bullets do not appear in the example above, then your browser does not recognize the "CIRCLE" bullet attribute and/or the "SQUARE" bullet attribute.

List tags (<LI>) also may be incorporated within another pair of non-empty tags, called “ordered list” tags:

<OL>ordered list</OL>: delineates a list, where the items are in sequential, numerical order. Each item begins with a <LI> tag. Ordered lists may be nested inside ordered lists or inside any other types of lists (one list inside of another list inside of another list). A line space automatically is inserted before and after an ordered list (that is, an entire line is skipped between an ordered list and any text before and after it), except for (on most browsers) a list nested within another list.

The initial <OL> tag may contain within it this parameter as part of the command:

TYPE="I"|"A"|"1"|"a"|"i": designates the appearance of the numbers preceding the items in the list and, therefore, is conducive to building an outline using nested ordered lists. "I" causes the items to be numbered I, II, III, IV, V, VI, VII, etc.
"A" causes the items to be numbered A, B, C, D, E, F, G, etc.
"1" (the default) causes the items to be numbered 1, 2, 3, 4, 5, 6, 7, etc.
"a" causes the items to be numbered a, b, c, d, e, f, g, etc.
"i" cause the items to be numbered i, ii, iii, iv, v, vi, vii, etc.

In an ordered list, the list (<LI>) tag may contain within it this parameter:

VALUE="1"|"2"|"3"|...|"N": immediately changes the number of that item to the Nth term of that particular numbering type. For example, VALUE="4" would label that item in the sequence as follows: for TYPE="I" that item would be “IV”;
for TYPE="A" that item would be “D”;
for TYPE="1" that item would be “4”;
for TYPE="a" that item would be “d”;
for TYPE="i" that item would be “iv.”

This is how items in an ordered list may be enumerated: As listed in the Jackson Heights Journal, Jackson Heights Middle School ranked 5th in the city-wide achievement test given last week:
<OL TYPE="I">
<LI>Oakfield Middle School
<OL TYPE="A">
<LI>Tod Hastings
<OL TYPE="1">
<LI>Math (#3)
<LI>History (#2)
<LI>Science (#2)
</OL>
<LI>Bonita Chavez
<OL TYPE="1">
<LI>Math (#1)
<LI>History (#4)
<LI>Science (#3)
</OL>
</OL>
<LI>Parkview Mid-High
<OL TYPE="A">
<LI>Jacque Russell
<OL TYPE="1">
<LI>Math (#2)
<LI>History (#5)
<LI>Science (#4)
</OL>
<LI>Dwayne Clancy
<OL TYPE="1">
<LI>Math (#4)
<LI>History (#7)
<LI>Science (#1)
</OL>
</OL>
. 
. 
. 
<LI VALUE="5">Jackson Heights Middle School
<OL TYPE="A">
<LI>Christine Quon
<OL TYPE="1">
<LI>Math (#7)
<LI>History (#6)
<LI>Science (#5)
</OL>
<LI>Roger Dietz
<OL TYPE="1">
<LI>Math (#5)
<LI>History (#8)
<LI>Science (#7)
</OL>
</OL>
</OL>
and would appear like this: As listed in the Jackson Heights Journal, Jackson Heights Middle School ranked 5th in the city-wide achievement test given last week:

Oakfield Middle School
1. Tod Hastings
  1. Math (#3)
  2. History (#2)
  3. Science (#2)
2. Bonita Chavez
  1. Math (#1)
  2. History (#4)
  3. Science (#3)
Parkview Mid-High
1. Jacque Russell
  1. Math (#2)
  2. History (#5)
  3. Science (#4)
2. Dwayne Clancy
  1. Math (#4)
  2. History (#7)
  3. Science (#1)
.
.
.
Jackson Heights Middle School
1. Christine Quon
  1. Math (#7)
  2. History (#6)
  3. Science (#5)
2. Roger Dietz
  1. Math (#5)
  2. History (#8)
  3. Science (#7)

Sometimes, it is helpful to include a glossary of terms in a document, which is accomplished with non-empty “definition list” tags:

<DL>definition list</DL>: delineates a list, where the items are individual terms paired with their definitions, and each definition is indented and placed one line down from each term. Definition lists may be nested inside definition lists or inside any other types of lists (one list inside of another list inside of another list). A line space automatically is inserted before and after a definition list (that is, an entire line is skipped between a definition list and any text before and after it), excluding a list nested within another list.
<DL COMPACT>definition list</DL>: same as <DL> & </DL>, except each definition is placed on the same line as each term.

Within the definition list are terms, each marked with an empty “definition-list term” tag, as well as the actual definitions of the terms, each marked with an empty “definition-list definition” tag:

<DT>: creates (but does not place bullets in front of) terms included in a glossary or definition list.
<DD>: indents (but does not place bullets in front of) definitions of terms in a glossary or definition list.

Here is a short list of common Internet terms: <DL>
<DT>HTML
<DD>Hypertext Markup Language
<DT>TP
<DD>Transfer Protocol
<DL>
<DT>FTP
<DD>File Transfer Protocol
<DT>HTTP
<DD>Hypertext Transfer Protocol
</DL>
<DT>URL
<DD>Uniform Resource Locator (= web address)
<DT>WWW
<DD>World Wide Web
</DL> and how this list would look on a browser:

HTML: Hypertext Markup Language
TP: Transfer Protocol

FTP
File Transfer Protocol
HTTP
Hypertext Transfer Protocol
URL: Uniform Resource Locator (= web address)
WWW: World Wide Web

When an enumerated list is required, with each item (“definition”) to be placed on the same line as each number (“term”), a compacted list could be used:

<DL COMPACT>
<DT>1<DD>HTML
<DT>1<DD>TP
<DT>1<DD>URL
<DT>1<DD>WWW
</DL> and would look this way:

1: HTML
2: TP
3: URL
4: WWW

At times it is beneficial to create a list of related, indented terms which are not preceded by either bullets or numbers. In such cases, non-empty “directory list” tags may be used:

<DIR>directory list</DIR>: creates a directory listing where each entry is indented (on most browsers). Directory lists may be nested inside directory lists or inside any other types of lists (one list inside of another list inside of another list). On most browsers, a line space automatically is inserted before and after a directory list (that is, an entire line is skipped between a directory list and any text before and after it), except for (on many browsers) a list nested within another list. Note: An example of directory lists nested within an unordered list may be seen by viewing the list of hyperlinks in the HTML source code of the initial page (“Ted’s HTML Tutorial”) of this portion of my web site.

The easiest way to understand directory list tags is to see that <DIR> tags indent the text coming after them, while </DIR> tags outdent the text coming after them. The difference between <DIR> & </DIR> tags and <BLOCKQUOTE> & </BLOCKQUOTE> tags is that directory list tags indent only the left margin of the text between them, whereas blockquote tags indent both the left and right margins of the text between them.

One example of a directory list is the table of contents of an HTML document, where each item in the table of contents is a hyperlink jumping directly to the site listed:

<H2>Table of Contents</H2><DIR>
<A HREF="P-I">Part I</A><DIR>
<A HREF="P-I_C-1">Chapter 1</A><DIR>
<A HREF="P-I_C-1_S-A">Section A</A> 
<A HREF="P-I_C-1_S-B">Section B</A></DIR>
<A HREF="P-I_C-2">Chapter 2</A><DIR>
<A HREF="P-I_C-2_S-A">Section A</A> 
<A HREF="P-I_C-2_S-B">Section B</A></DIR></DIR>
<A HREF="P-II">Part II</A><DIR>
<A HREF="P-II_C-3">Chapter 3</A><DIR>
<A HREF="P-II_C-3_S-A">Section A</A> 
<A HREF="P-II_C-3_S-B">Section B</A></DIR>
<A HREF="P-II_C-4">Chapter 4</A><DIR>
<A HREF="P-II_C-4_S-A">Section A</A> 
<A HREF="P-II_C-4_S-B">Section B</A></DIR></DIR></DIR> and which would look like this when marked up:

Part I Chapter 1 Section A
Section B Chapter 2 Section A
Section B Part II Chapter 3 Section A
Section B Chapter 4 Section A
Section B Note: The above hyperlinks are not active; they are for demonstration only. To see how the above list also could be generated using a table, go to the example section of Tables. How to create hyperlinks will be shown in the section on Hyperlinks.

Proceed to Graphic Images

Return to Main Page of Ted’s HTML Tutorial