C & G web - Lists

Lists

The OL tag marks up an ordered list of items. Each item should be marked up with a LI, and it will be displayed with a number in front of it.

The START attribute indicates where the list should start. The COMPACT attribute indicates that the list contains only short list items, so it may be rendered in a more compact way. This is currently not widely supported.

The TYPEs for ordered lists should give the following appearance:

1 - Arabic numbers (default) (1, 2, 3, 4, ...)
a - Alphanumeric, lowercase (a, b, c, d, ...)
A - Alphanumeric, uppercase (A, B, C, D, ...)
i - Roman numbers, lowercase (i, ii, iii, iv, ...)
I - Roman numbers, uppercase (I, II, III, IV, ...)

The UL element indicates an unordered list. Every item in a list is marked with LI, and usually appears with a bullet of some sort in front of it. If you need numbering, use OL for an ordered list.

The type of bullet can be suggested with the TYPE attribute. You have three possible styles: "disc" for a closed bullet, "square" for an open square and "circle" for an open bullet. The COMPACT attribute is used to indicate that the list items are short, so the browser can render the list more compact. For example, it could put more than one item on a line.

The LI element is used to mark list items within a list. When the list used is OL, ordered list, the LI element will be rendered with a number. The appearance of that number can be controlled with the TYPE attribute. Similarly, inside an unordered list UL the type of bullet that is displayed can be controlled with TYPE. DIR and MENU can't be controlled this way, as they are not required to be bulleted or numbered. For ordered lists, you can also reset the sequence with the VALUE attribute.

DL is used to provide a list of items with associated definitions. Every item should be put in a DT, and its definition goes in the DD directly following it. This list is typically rendered without bullets of any kind.

While it is legal to have a DL with only DD or DT tags, it doesn't make much sense (what good is a definition without a term?) and you shouldn't expect it to get rendered as a normal list.

Example - Lists

Unordered Lists

An unordered list is designated by the ' ul ' tag. For each new List Item a ' li ' tag is required. Each new list item is on a new line and is prefixed with a bullet point.

Monday
Tuesday
Wednesday
Thursday
Friday

Ordered Lists

An ordered list is designated by the ' ol ' tag. As before, for each new List Item a ' li ' tag is required. Each new list item is on a new line and is prefixed with a sequential number.

Monday
Tuesday
Wednesday
Thursday
Friday

Definition Lists

Definition lists are slightly different. A definition list is designated by the ' dl ' tag. For each new Definition Term a ' dd ' tag is required. For each new Definition Term a Definition Description is required. This is acheved using the ' dd ' tag.

HTML: HyperText Mark-up Language
URL: Uniform Resource Locator
Browser: An application for accessing the WWW
WWW: World Wide Web
Hyperlink: A link to another document, to any resource or place within a document.

Nested Lists

Lists can also be nested one inside the other. In this example the primary list (days of the week), is supplemented by a secondary list for times on Wednesday.

Monday
Tuesday
Wednesday
- 6am - 9am
- 9am - 12n
- 12n - 3pm
- 3pm - 6pm
Thursday
Friday

The HTML

<html>
<head>
	<title>Lists</title>
</head>

<body>
	
<h2>Unordered Lists</h2>

<p>An unordered list is designated by the ' ul ' tag.
 For each new List Item a ' li ' tag is required.
 Each new list item is on a new line and is prefixed with a bullet point.

	<ul>
		<li>Monday
		<li>Tuesday
		<li>Wednesday
		<li>Thursday
		<li>Friday
	</ul>
	

<h2>Ordered Lists</h2>

<p>An ordered list is designated by the ' ol ' tag.
 As before, for each new List Item a ' li ' tag is required.
 Each new list item is on a new line and is prefixed with a sequential number.

	<ol>
		<li>Monday
		<li>Tuesday
		<li>Wednesday
		<li>Thursday
		<li>Friday
	</ol>
	
<h2>Definition Lists</h2>

<p>Definition lists are slightly different.
 A definition list is designated by the ' dl ' tag. For
each new Definition Term a ' dd ' tag is required.
 For each new Definition Term a Definition
Description is required. This is acheved using the ' dd ' tag.

	<dl>
		<dt>HTML
			<dd>HyperText Mark-up Language
		<dt>URL
			<dd>Uniform Resource Locator
		<dt>Browser
			<dd>An application for accessing the WWW
		<dt>WWW
			<dd>World Wide Web
		<dt>Hyperlink 
			<dd>A link to another document,
			 to any resource or place within a document.
	</dl>
	
<h2>Nested Lists</h2>

<p>Lists can also be nested one inside the other.
 In this example the primary list (days of the
week), is supplemented by a secondary list for times on Wednesday.	
	
	<ul>
		<li>Monday
		<li>Tuesday
		<li>Wednesday
			<ul>
				<li>6am - 9am
				<li>9am - 12n
				<li>12n - 3pm
				<li>3pm - 6pm
			</ul>
		<li>Thursday
		<li>Friday
	</ul>	

</body>
</html>

Previous page...

Christopher Ward London Limited