LISTS



There are several different forms of list. There are ordered lists, unordered lists, glossary lists, menu lists, and directory lists. Here we will only look at the first three, as the others are not widely used, or vastly different.


Ordered Lists

Also known as numbered lists, they are, by defualt, numbered by most browsers.

The tags that start and end ao Ordered List are:

<ol> and </ol>

Each entry in the list must be started and ended with an <li> and </li> tag, meaning "List Item".

When declaring the OL tag, there are several optional properties available:

So an ordered list might be coded like this:

<ol compact start=5 type=i>
	<li>Item 5</li>
	<li>Item 6</li>
	<li>Item 7</li>
</ol>

Which would look something like this:

  1. Item 5
  2. Item 6
  3. Item 7


Unordered Lists

These begin and end with:

<ul> and </ul>

This looks a bit like the Ordered Lists, except the List Items are not numbered, and they are not gauranteed to be in the same order as they are entered in the source. The parameters that can be called are:

Again, you will need to use the <li> and </li> tags, so you might write something like this:

<ul compact type=square>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Which will look something like this:

Which you should recognise from the format of parts of these pages.

With regard to the <li> tag, you can define the type of bullet or number that you want in there, depending on whether you're using an Ordered List or an Unordered List. Simply apply the relevant "type" specification for the type of list that you're using:

Eg:
   	<li type="A">Item</li> for Ordered lists
	<li type=disc>Item</li> for Unordered Lists

Glossary Lists

These are sometimes also known as Definition Lists, because they consist of two tags for the List Items (the <li> tag is not used here), one as a term, and one as a definition.

They begin and end with:

<dl> and </dl>

With the only preference being "compact".

The other two tags are:

<dt> - Term

<dd> - Definition

Neither of these tags have a closing tag. The way that it is structured is as follows:

<dl compact>
	<dt>Term 1
	<dd>Definition
	<dt>Term 2
	<dd>Definition
</dl>

Which might look like this:

Term 1
Definition
Term 2
Definition




Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page