Home : Tutorial Eight : Next Tutorial

Tutorial Eight: Formatting - Creating Lists

Definition Lists
Unordered Lists
Ordered Lists
Customising Bullets

Lists are an effective way of presenting information and help to break a document into readable 'chunks' by defining important points. Lists are available in definition, unordered and ordered formats.

Definition Lists

3 tags work together to create a definition, or glossary, list - normally used to separate items accompanied by lengthy descriptions or references. The <dl> </dl> provides a container for the definition list. <dt> begins the definition term, or the item you are going to define, and <dd> begins the definition description, neither of these require a closing tag.

<dl>
<dt> Monash University
<dd>A large University in Victoria, Australia. Within its walls are to be found the cream of Australia's educators and some very sucky web designers in the CDL department
</dl>

resulting in:

Monash University

A large University in Victoria, Australia. Within its walls are to be found the cream of Australia's educators and some very sucky web designers in the CDL department

The definition term becomes a heading, with the definition description indenting continuously.

Unordered Lists

Unordered lists produce a bulleted set of items:

<ul>Begins the unordered list
<li>Every time you want a new point you must use the list element. There is no need for a closing tag, although HTML editors seem to insert one and they may be required for CSS.
</li>
<li>Each list element automatically begins on a new line.
</ul>Ends the list

• The bullet defaults to a solid black circle
• This can be varied by adding the 'type' attribute
• For instance <ul type="square"> or <ul type="circle"> the default is specifically type="disc"
  • Lists can be nested
  • Ensure that all tags are properly closed if you wish to do this
  • Browsers usually change the type of bullet when lists are nested

   

Ordered Lists

Ordered lists operate exactly like unordered lists but have different attributes and create an automatic sequence, which is handled by the browser. They can also be nested and the bullet type changed:

1. The default type="1" begins a numbered sequence
2. type="i" begins a lowercase roman numeral sequence
3. type="I" begins an uppercase roman numeral sequence
4. type="a" begins a lowercase alphabetical sequence
5. type="A" begins an uppercase alphabetical sequence
6. The start attribute will begin the sequence at any specified value

<ol type="i" start="6">
<li>This creates an ordered list
<li> which begins with the lowercase roman numeral 6
</ol>

6. This creates an ordered list
7. which begins with the lower case roman numeral 6

The W3C is discouraging the use of the start and type attributes in favour of Style Sheets which can perform the same function.

Custom Bullets

Custom bullets are easily added to a web page, although some familiarity with a graphics program is required if you wish to make them yourself. You may do this to stay in keeping with a graphical style, or to use the bullets as hyperlinks. Linking text and images is explained in Tutorial 10. In this case you would not use the list format, rather <blockquote>, <p> and <br> tags or perhaps even tables.

This simple bullet was created in Corel PhotoPaint. The image and the text has been indented using the blockquote tag.

It is effective but would perhaps look better set up inside a table.

 

	Using an invisible table avoids the text wrapping underneath the image.
	This looks much neater. There is a plethora of free graphic resources available on the web, many offering bullets and horizontal rules.

Tables will be covered in the next tutorial.

Home : Next Tutorial

This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it