Lists


Intro » Getting Started » Details » FAQs » Links | Index » Contents

Introduction to Lists

This section describes how to create lists within your HTML documents. There are a various types of lists that can be created; the most common being ordered (numbered) and unordered (bulleted). Here you'll find out how to customise your lists along with the less less common list types, menu, definition and directories.

Specific Markup

<LI>, <OL>, <UL>, <MENU>, <DIR>, <DL>, <DT>, <DD>, COMPACT

Go to ContentsGetting Started

The basic list

Lists are defined by a list type and contain list items. The list type determines how the list items are rendered, i.e. with bullets, numbers and/or indentation. Most browsers render lists indented from the rest of the body text, however it is best not to rely on this as a source of indentation (see Tips n' Tricks for hints on reliable indentation). For complex lists it is perfectly acceptable to nest lists, thus giving multi-level bullet points or numbering. The following example shows how to create a simple bullet point list using the <UL> list type, which uses <LI></LI> as its list item element.

Some bands:
<UL>
<LI>Pulp</LI>
<LI>The Wedding Present</LI>
<LI>Spacemen 3</LI>
</UL>


Some bands:

Go to ContentsThe Details

Unordered Lists

An unordered list provides each list element with a bullet. As further levels of list are included (this is called nesting), the bullet may change (but not necessarily). An unordered list should be enclosed in a pair of <UL></UL> tags.

<UL>
<LI>Pulp</LI>
	<UL>
	<LI>Jarvis Cocker</LI>
	<LI>Candida Doyle</LI>
	</UL>

<LI>The Wedding Present</LI>
	<UL TYPE="square">
	<LI>David Gedge </LI>
	<LI>Simon Smith </LI>
	</UL>

<LI>Spacemen 3</LI>
	<UL COMPACT>
	<LI>Sonic Boom</LI>
	<LI>Jason Spaceman</LI>
	</UL>
</UL>


Some band members:

Ordered Lists

An ordered list provides the list elements will sequential numbering. An ordered list should be enclosed in a pair of <OL></OL> tags.

<OL TYPE="i" START=2>
<LI>At junction 10 take the M3 towards Sunbury.</LI>
<LI>Turn off at junction 1 of the M3 and head towards Kingston</LI>
<LI>3 miles after Kempton Park, take a left by The Bell pub.</LI>
</OL>


  1. At junction 10 take the M3 towards Sunbury.
  2. Turn off at junction 1 of the M3 and head towards Kingston
  3. 3 miles after Kempton Park, take a left by The Bell pub.

Directory Lists

Directory lists are similar to unordered lists with the exception that they should not be nested and the list item marker, <LI> does not take any attributes. They are typically used to create a list of short items, usually up to 20 characters in length. An directory list should be enclosed in a pair of <DIR></DIR> tags.

Bread roll:
<DIR>
<LI>Mole</LI>
<LI>Foal</LI>
<LI>Vole</LI>
<LI>GOAL!</LI>
</DIR>


Bread roll:
  • Mole
  • Foal
  • Vole
  • GOAL!
  • Menu Lists

    Menu lists are similar to unordered lists with the exception that they should not be nested. Some browsers render a menu list more compactly than an unordered list. A menu list should be enclosed in a pair of <MENU></MENU> tags.

    Send Cheyenne:
    <MENU>
    <LI>Piranhas</LI>
    <LI>Tibetan Llamas</LI>
    <LI>East Anglian farmers</LI>
    <LI>PYJAMAS!</LI>
    </MENU>


    Send Cheyenne:
  • Piranhas
  • Tibetan Llamas
  • East Anglian farmers
  • PYJAMAS!
  • Definition Lists

    Definition lists display a list of paired terms and definitions. Line breaks between each item should be automatically generated and the definition shown indented. Unlike all the previous list types, definition lists do not make use of the <LI></LI> list item element. Instead the <DT></DT> tag is used to indicate the definition term and <DD></DD> tags contain the corresponding definition. A definition list should be enclosed in a pair of <DL></DL> tags.

    The COMPACT attribute can be used with the <DL></DL> tag to create a more 'compact' list if the list is large or the individual items are small (not many browsers support this attribute).

    Some definitions:
    <DL>
    <DT>plasma</DT>
    <DD>a hot ionized gas containing positive ions and electrons</DD>
    <DT>thyristor</DT>
    <DD>a semiconductor rectifier whose forward current between two electrodes, the anode and the cathode, is initiated by means of a signal applied to a third electrode, the gate. The current subsequently becomes independent of the of the signal.</DD>
    </DL>

    <DL COMPACT>
    <DT>quintessence</DT>
    <DD>the most typical representation of a quality, state, etc.</DD>
    </DL>


    Some definitions:
    plasma
    a hot ionized gas containing positive ions and electrons
    thyristor
    a semiconductor rectifier whose forward current between two electrodes, the anode and the cathode, is initiated by means of a signal applied to a third electrode, the gate. The current subsequently becomes independent of the of the signal.
    quintessence
    the most typical representation of a quality, state, etc.

    Go to ContentsFrequently Asked Questions

    Why doesn't my TYPE attribute work?
    Although the TYPE attribute is a legal part of HTML 3.2 it is not supported by MS Internet Explorer 3 and below.

    Why doesn't my the COMPACT attribute make any difference?
    Although the COMPACT attribute is a legal part of HTML 3.2 it is not widely supported; neither MS Internet Explorer nor Netscape Navigator render this attribute.

    How can I create a numbered list such that subsections are automatically number 1.1.2, etc.
    Unfortunately this is not currently possible. If you really need precisely this kind of numbering, your only choice is to create an ordered list without the list item tags and include your own numbers. Also remember that you cannot guarantee that every browser will indent the different list levels.

    Go to ContentsUseful References


    Sizzling HTML Jalfrezi
    ContactPurchase
    Page Contents
    Previous pageJalfrezi ContentsNext page

    Click Here!