contents introduction reference index previous next

HTML 4 - User's Guide
Lists and the OL, UL, DL elements

Contents:

1. SAMPLES: 1.1 An ordered list
1.2 An unordered list
1.3 A definition list
1.4 More on the use of a definition list

2. USAGE: 2.1 Simple form
2.2 Embedded list
2.3 Attributes
2.4 Style properties

The 3 types of list are:
- ordered lists, defined by an OL element, with lines defined by LI elements
- unordered lists, defined by a UL element, with lines defined by LI elements
- definition lists, defined by a DL element, with lines defined by DD elements

1. SAMPLES

1.1 An ordered list

<HTML><HEAD><TITLE>ORDERED LIST</TITLE>
  <META http-equiv="Content-Type" content="text/html">
  <LINK rel="stylesheet" type="text/css" href="../Styles/HatayBook.css">
  <STYLE>
     OL.chapters {list-style-type: upper-roman}
     OL.articles {list-style-type: lower-alpha}
  </STYLE>
</HEAD>
<BODY>
North America
<OL class="chapters">
    <LI>Introduction</LI>  
    <LI>Overview</LI>
    <LI>Canada</LI>
    <OL class="paragraphs">
        <LI>The Geography
        <OL class="articles">
            <LI>The Canadian Shield
            <LI>The Interior Plains
            <LI>The Great Lakes and St Laurence lowlands
            <LI>The Canadian Cordillera
            <LI>Appachian Canada
            <LI>The Artic Islands
        </OL>
        <LI>The Economy
        <OL class="articles">
            <LI>Industry
            <LI>Agriculture
            <LI>Services
        </OL>
    </OL>
    <LI>The United States
    <OL class="paragraphs">
        <LI>The geography
        <OL class="articles">
            <LI>The East
            <LI>The Middle West
            <LI>The Rocky Mountains
            <LI>The West
            <LI>The South
        </OL>
        <LI>The economy
        <OL class="articles">
            <LI>Industry
            <LI>Agriculture
            <LI>Services
        </OL>
    </OL>
    <LI>Mexico</LI>
    <OL class="paragraphs">
        <LI>The Geography
        <OL class="articles">
            <LI>Baja California
            <LI>The northern regions
            <LI>The western and central regions
            <LI>The southern regions
        </OL>
        <LI>The Economy
        <OL class="articles">
            <LI>Industry
            <LI>Agriculture
            <LI>Services
        </OL>
    </OL>
</OL>
</BODY></HTML>

To see how the document is displayed, please click here

An ordered list is defined by an OL element. The lines in the list are defined by LI elements. So the struture the code is simple enough:

<OL ...>
   <LI>...
   <LI>...
   ...
</OL>

Now, in place of a line, you can put an embedded list. You see it here:

<OL class="chapters">
    <LI>Introduction</LI>
    <LI>Overview</LI>
    <LI>Canada</LI>
    <OL class="paragraphs">
    ...
    </OL>
    <LI>The United States</LI>
...
</OL>

The embedded list, in turn, can have lines and embedded lists... This explains the structure of the sample list.

The list is ordered, i.e. each line in the list is preceded by an ordering symbol, which can be a usual number, a roman numeral, a letter, etc. You can choose this through the list-style-type property of the OL element - in the STYLE element of the above example, this property is defined for 2 classes of the OL element: the 'chapters' and the 'articles' classes (what you see is how classes of an element are denoted -- for more details, please see the chapter on styles):

-	the value 'upper-roman' causes the roman numeral in upper case to be used
-	the value 'lower-alpha', the alphabetic characters in lower case

For the 'paragraphs' class, the list-style-type is not assigned a value, it defaults to 'decimal', i.e. the ordinary numbers are used.
You can see the result of all that on the rendered page.

1.2 An unordered list


<HTML><HEAD><TITLE>AN UNORDERED LIST</TITLE>

  <META http-equiv="Content-Type" content="text/html">

  <STYLE>

    UL.class {list-style-type:square}

    UL.animals {list-style-image:url(../Images/MyArrow.bmp)}

  </STYLE>

</HEAD>

<BODY>

  <UL class="class">

         <LI>Mammals

         <UL class="animals">

               <LI>Koala

               <LI>Raccoon

               <LI>Reedbuck

         </UL>

         <LI>Birds

         <UL class="animals">

               <LI>Toucan

               <LI>Hummingbird

               <LI>Magpie

         </UL>

         <LI>Fishes

         <UL class="animals">

               <LI>Piranha

               <LI>Perch

               <LI>Zander

         </UL>

  <UL>

</BODY></HTML>

To see the rendered result, please click here An unordered list is defined by a UL element. The lines in the list are defined by LI elements. So the struture the code is simple enough:

<UL ...>
   <LI>...
   <LI>...
   ...
</UL>

In place of a LI element, you can put an embedded list (in the sample, the embedded lists are unordered -- obviously, you can also put in ordered lists here, as you can unordered list in the previous example.) The embedded list can have lines and further embedded list, etc...

Ahead of unordered list lines, there are no ordering symbols, but special markers. You control the choice of these markers through the list-style-type" and list-style-image" properties:

-	with the 'list-style-type', you can choose from among these symbols: - disc (initial value) - circle - square
-	with the 'list-style-image', you can reference an image defined in an external image file: here, the lines contained in a UL element in the "animals" class are preceded by the image contained in the MyArrow.bmp file

1.3 A definition list


<HTML><HEAD><TITLE>A DEFINITION LIST</TITLE>

  <META http-equiv="Content-Type" content="text/html">

</HEAD>

<BODY>

DEFINITIONS

<DL>

<DT>Block

<DD>

A block box is formed by more than one logical line. When an element is rendered in a block box, the box occupies a range of lines of its own, unless it is floated. A floated box lets lines from the surrounding text flow on its right or its left.

<DT>Box

<DD>An element is rendered on the visual medium, in a rectangular area called <b style="color:red">box</b>. A box can be of one of the types:<br>

- in-line box<br>

- block box<br>

<DT>In-line 

<DD>

An in-line box forms one logical line. When an element is rendered in an in-line box, the box is displayed on the same line as the text that precedes it. If the physical line cannot accommodate the box, several lines are used as needed. Free space after the last line is available for the information coming after the element

</DL>

</BODY></HTML>

To see the rendered result, please click here

The DL element is used to define a definition list:

-	the DT element contains the term to define
-	the DD element contains the definition

The DD block is indented.

1.4 More on the use of definition lists

<HTML><HEAD><TITLE></TITLE>
  <META http-equiv="Content-Type" content="text/html">
  <STYLE>
     DT.order {font-weight:bold; color:#DD0000;}
     DT.animals {font-style:italic; font-weight:normal;}
     DD.suborder {font-weight:bold ; color:blue;}
     DD {font-weight:normal; color:black}
  </STYLE>
</HEAD>
<BODY>
<b style="color:#008000">JURASSIC ANIMALS</b>
<DL style="background:#BBEEDD">
<DT class="order">Pterosauria
    <DD class="suborder">Rhamphorhynchoidea
    <DL>
    <DT class="animals">The primitive flyers:
        <DD>Eudimorphodon
        <DD>Dimorphodon
    </DL>
    <DD class="suborder">Pterodactyloidea
    <DL>
    <DT class="animals">Later flying reptiles:
        <DD>Pterodactylus
        <DD>Pteranodon
        <DD>Quetzalcoatlus
    </DL>
<DT class="order">Saurischia
    <DD class="suborder">Theopodora
    <DL>
    <DT class="animals">Carnivorous dinosaurs:
        <DD>Velociraptor
        <DD>TeratoSaurus
        <DD>Megalosaurus
        <DD>Tyranosaurus            
    </DL>
    <DD class="suborder">Sauropodomorpha
    <DL>
    <DT class="animals">Herbivorous dinosaurs:
        <DD>Brachiosaurus
        <DD>Diplodocus
        <DD>Apatosaurus (Brontosaurus)
    </DL>
<DT class="order">Orthinischia
    <DD class="suborder">Ornithopodia
    <DL>
    <DT class="animals">Bird feet: 
        <DD>Lesothosaurus
        <DD>Hypsilophodont
        <DD>Iguanodon
    </DL>
    <DD class="suborder">Stegosauria
    <DL>
    <DT class="animals">Bony plated backbone dinosaurs:
        <DD>Stegosaurus
    </DL>
    <DD class="suborder">Ankylosauria
    <DL>
    <DT class="animals">Armoured dinosaurs:
        <DD>Ankylosaurus
    </DL>
    <DD class="suborder">Ceraptopia
    <DL>
    <DT class="animals">Horned dinosaurs:
        <DD>Triceratops
        <DD>Chasmosaurus
    </DL>
</DL>
</BODY></HTML>

To see how the page is displayed, please click here

In place of a DD you can put an embedded DL block. The contents of the embedded DL element is further indented. You can use embedded DL elements to create indentation to multiple levels.

2. USAGE

2.1 Simple form

The simple forms of the lists are:

Ordered list - with ordering symbols ahead of the lines
	`<OL> <LI>line text <LI>line text ... </OL>`
Unordered list - with markers ahead of the lines
	`<UL> <LI>line text <LI>line text ... </UL>`
Definition list - with definition text indented
	`<DL> <DT>entry <DD>definition text - indented <DT>entry <DD>definition text - indented ... </DL>`

2.2 Embedded list

In place of the LI or DD element, an embbed list can be inserted, resulting in structures like these:

Ordered list - with ordering symbols ahead of the lines
	`<OL> <LI>line text <OL> <LI>line text ... </OL> <LI>line text ... </OL>`
Unordered list - with markers ahead of the lines
	`<UL> <LI>line text <UL> <LI>line text ... </UL> <LI>line text ... </UL>`
Definition list - with definition text indented
	`<DL> <DT>entry <DD>definition text - indented <DL> <DT>entry - aligned with first level DD blocks <DD>definition text - indented twice <DD>definition text - indented twice <DD>... </DL> <DT>entry <DD>definition text - indented <DD>definition text - indented ... </DL>`

Logically, there is only one DD block under a DT element, since the DD block holds the definition of the term contained in the DT element. However, there can be more than one DD under a DT element, to make the structure resemble the two others. If you wish to strictly abide by logic, in place of a new DD block, you can just use the BR element to start the new block.

2.3 Attributes

All the elements have what we call common attributes, in this document. These are:
- the id attribute
- the class attribute
- the lang attribute
- the dir attribute
- the style attribute
- the title attribute
- the common event handling attributes

The style attribute is especially useful as it assigns properties to individual elements to achieve presentation objectives with the greatest flexibility.

2.4 Style properties

Most widely used in connection with lists are:
- the list-style-type property
- the list-style-image property
- the list-style-position property
- the marker-offset property

contents introduction reference index previous next