Lists Test Page

Examples of Lists

DIR List DL List Menu List OL List UL List

<dir>
container

html +	html 2.0	html 3.0	html 3.2	html 3.4
1.0	2.0	3.0	4.0
1.0	2.0	3.0	4.0
1.0	2.0

Sandia Reference

The DIR tag encloses a list of items with a maximum widthof 20 characters. "The intent is that a browser can render this in columns of 24 characters wide. The <DIR> list uses the <li> tags to identify each item in the list.

Example:
<dir>
<lh>This is the list heading</lh>
<li>first item
<li>second item
<li>third item
</dir>

This is the list heading

first item

second item

third item

align=

causes horizontal alignment directed by the argument.
Example:
<dir align="right">
<li>first item
<li>second item
<li>third item
</dir>

first item

second item

third item

"left"

causes the caption to be drawn flush left of the table or figure.

"right"

causes the caption to be drawn flush right of the table or figure.

"center"

causes the caption to be horizontally centered relative to the centerline of the table or figure.

"justify"

causes the text to be flush left and right.

compact=

html
+

html
2.0

html
3.0

html
3.2

html
3.4

the intention of this attribute is to reduce the white space between each item in the list. Few browsers recognize it.
Example:
<dir compact>
<li>first item
<li>second item
<li>third item
</dir>

first item

second item

third item

dir=

"ltr"

"rtl"

LANG=

<dl>
container

html +	html 2.0	html 3.0	html 3.2	html 3.4
1.0	2.0	3.0	4.0
1.0	2.0	3.0	4.0
1.0?	2.0?	?	?	?

Sandia Reference

This is the tag for a definition list. The definition list is unique in the lists category, because it uses two columns, a left column (denoted by <dt> where the term to be defined is placed and the right column (denoted by <dd> where the definition data is placed. Sometimes the term is placed on the line above the definition.
W3's description
Example:
<dl>
<lh>This is the heading</lh>
<dt>first item
<dd>this is the information in the definition
<dt>second item
<dd>this is the information in the second definition
<dt>third item
<dd>this is the information in the third definition
</dl>

first item: this is the information in the definition
second item: this is the information in the second definition
third item: this is the information in the third definition

class=

clear=

"When there is already a figure or table in the margin, you sometimes want to position another figure below the figure in the margin rather than alongside it. The CLEAR attribute allows you to move down unconditionally:" (w3)

Alternatively, you can decide to place the figure alongside the figure in the margin just so long as there is enough room. The minimum width needed is specified as "## en" where ##=the number of nutts or ### pixels where ### is the number of pixels.
Example:
<dl clear="left">
<dt>first item
<dd>this is the information in the definition
<dt>second item
<dd>this is the information in the second definition
<dt>third item
<dd>this is the information in the third definition
</dl>

first mozilla item

this is the information in the definition

second mozilla item

this is the information in the second definition

third mozilla item

this is the information in the third definition mozilla 4TD>

"left"

"move down until left margin is clear" (w3)

"right"

"move down until right margin is clear" (w3)

"all"

"move down until both margins are clear" (w3)

"## en"

"move down until there is at least 40 en units free" (w3)

"### pixels"

"move down until there is at least 100 pixels free" (w3)

compact

the compact attribute is used to remove unnecessary white space. Some browsers will insert white space between definition items, this attribute will discourage this. Most browsers do not recognize it.
Example:
<dl compact>
<dt>first item
<dd>this is the information in the definition
<dt>second item
<dd>this is the information in the second definition
<dt>third item
<dd>this is the information in the third definition
</dl>

first item: this is the information in the definition
second item: this is the information in the second definition
third item: this is the information in the third definition

dir=

"ltr"

"rtl"

id=

lang=

<menu>
container

html +	html 2.0	html 3.0	html 3.2	html 3.4
1.0	2.0	3.0	4.0
1.0	2.0	3.0	4.0
1.0	2.0

Sandia Reference

this is the same as unordered list. It uses <lh> and <li> as subordinate tags.
"(Menu and DIR"... elements are superceded by extensions to the UL element. User agents (Browsers) are advised to continue to support them for the sake of legacy documents. (Dianne Gorman)
Example:
<menu>
<li>first item
<li>second item
<li>third item
</menu>

first item

second item

third item

align=

forces the alignment of the list item according to the arguments below.

"left"

"center"

"right"

"justify"

compact

html
+

html
2.0

html
3.0

html
3.2

html
3.4

dir=

"ltr"

"rtl"

LANG=

<ol>
container

html +	html 2.0	html 3.0	html 3.2	html 3.4
1.1	2.0	3.0	4.0
1.0	2.0	3.0	4.0
1.0	2.0

Sandia Reference

creates indented lists with some sort of numbering scheme.
It takes the <LH> (list heading) and <LI> (list item) as well as the "compact" attribute.
Example:
<ol>
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ol>

This is the heading

first item
second item
third item

align=

forces the alignment of the list item according to the arguments below.

"left"

"center"

"right"

"justify"

class=

clear=

"left"

"move down until left margin is clear" (w3)

"right"

"move down until right margin is clear" (w3)

"all"

"move down until both margins are clear" (w3)

"## en"

"move down until there is at least 40 en units free" (w3)

"### pixels"

"move down until there is at least 100 pixels free" (w3)

compact

continue=

causes the browser to continue with the next number after a previous ordered list. (Dianne Gorman) Example:
<ol>
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

Example:
<ol continue>
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

dir=

"ltr"

"rtl"

id=

lang=

none=

specifies that the following block consists of individual items, each beginning with an <li> tag. The items are numbered in arabic numerals.

seqnum=

this allows you to specify the starting number in an ordered list. (Diane Gorman)
Example:
<ol seqnum="5">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

skip=

tells the browser to skip "#" numbers in numbering items. (Diane Gorman)
Example:
<ol skip="2">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

start=

specifies a starting number for the list.
Example:
<ol start="8">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

type=

changes the numbering style of the list.

"A"

use large letter. (note the "A" is a capital letter)
Example:
<ol type="A">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

""a""

uses small letters. (note the "a" is lower case.)
Example:
<ol type="a">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

"I"

this specifies large Roman numerals. (Note the "I" is upper case.)
Example:
<ol type="I">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

"i"

specifies small roman numerals. (Note the "i" is lower case.)
Example:
<ol type="i">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

"1"

this is the default setting, specifying the use of arabic numbers.
Example:
<ol type="1">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

wrap=

causes the list to wrap to the next column or the next line. (Dianne Gorman)

"vert"

causes the list of items to go down the screen an wrap to the next column.

"horiz"

the items go across the screen and then wrap around to the next line.
Example:
<ol type="1" wrap="horiz">
<li>first item
<li>second item
<li>third item
</ol>

first item
second item
third item

"none"

this forces no wrapping of the list. It just goes down the page, for ever.

<ul>
container

html +	html 2.0	html 3.0	html 3.2	html 3.4
1.1	2.0	3.0	4.0
1.0	2.0	3.0	4.0
1.0	2.0

Sandia Reference

"unordered list" presents list items in a column, each annotated with a bullet or other device.
Each list takes <LH> and <LI> tags.
W3's description
Example:
<ul>
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

align=

specifies the horizontal alignment of the table (not its contents) (w3)

"center"

the table is centered between the text margins and text flow around the table is disabled. This is the default setting for ALIGN. (w3)

"justify"

When applicable, the table should be sized top fill the space between the left and right text margins. Text flow around the table is disabled for align="justify". (w3)

"left"

flush left with the left text margin (w3) (IExplore)

"right"

flush right with the right text margin (w3) (IExplore)

"decimal"

text lines are indented such that the first occurrence of a decimal point on each line are aligned vertically. If a line doesn't contain a decimal point, the line is rendered flush left for data cells and centered for header cells.

class=

clear=

"left"

"move down until left margin is clear" (w3)

"right"

"move down until right margin is clear" (w3)

"all"

"move down until both margins are clear" (w3)

"## en"

"move down until there is at least 40 en units free" (w3)

"### pixels"

"move down until there is at least 100 pixels free" (w3)

compact

dingbat=

this allows the author to specify a standard icon (see ICONS above) or a dingbat in place of the default bullet. (Dianne Gorman)

dir=

"ltr"

"rtl"

id=

lang=

md=

This attribute specifies the message digest or chyptographic checksum (MD5 in base 64). The MD attribute is generally allowed for all elements which support URI based links.

plain=

causes the browser to supress the display of bullets (Dianne Gorman)
Example:
<ul plain>
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

src=

this attribute substitutes the default bullet for the image (*.gif or *.jpg) stipulated. (Dianne Gorman)
Example:
<ul src="netscape.gif">
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

type=

The basic bulleted list has a default progression of bullet types that changes through the intents. The type tag allows you to change the progression.

"disc"

changes the default to a disc
Example:
<ul type="disc">
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

"circle"

changes the default to a circle
Example:
<ul type="circle">
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

"square"

changes the default to a square
Example:
<ul type="square">
<lh>This is the heading</lh>
<li>first item
<li>second item
<li>third item
</ul>

This is the heading

first item
second item
third item

wrap=

causes the list to wrap to the next column or the next line. (Dianne Gorman)

"vert"

causes the list of items to go down the screen an wrap to the next column.

"horiz"

the items go across the screen and then wrap around to the next line.

"none"

this forces no wrapping of the list. It just goes down the page, for ever.