Using Lists in HTML
Lessons Covered


A list is used to arrange a set of items in a particular style or order. A list may represent for example shopping cart items, a list of websites or even a set of books.

Lists are classified as being ordered, unordered or definition, each of which are discuessed below. A list item specifies something as belonging to a particular list. Each list item is created by use of the <li> tag.



Ordered Lists

An ordered list is one whereby the items of that list are displayed in some unique way. Items can be listed by numbers (e.g. 1, 2, 3), roman numerals ( e.g. i, ii, iii) or even letters (e.g. a, b, c). An ordered list is defined by the <ol> tag.

The type attribute specifies how our list should be displayed. By default (if we do not specify a type), list items are displayed using numbers.

The example below lists three (3) items in an ordered fashion using common letters:

<ol type="a"> 
	<li> Flowers </li> 
	<li> Trees </li>
	<li> Bees </li>
</ol>

arrow  Click to see result


Note: The type attribute is depreciated in html 4.01 though still supported by browsers. In CSS the same effect can be achieved by using line-style-type.


After the <ol> tag is opened we start each list item with the <li> tag as also shown in the above example.


Unordered Lists

Unordered lists are displayed in no particular format. They have no numbers or letters for list items. Instead, they are displayed by bullets hence the name unordered applies.

Unordered lists are defined by the <ul> tag.

Example of an unordered list of food items:

<ul> 
	<li> Banana Chips </li> 
	<li> Chicken Back</li>
	<li> White Rice </li>
	<li> Carrots </li>
	<li> Grapes </li>

</ul>

arrow  Click to see result

There is no type definition in unordered lists. Do you understand the difference ?


Definition Lists

A definition list defines a description of a list item. A definition list starts with the <dl> (definition list) tag. The list item is placed beween a <dt> (definition term) tag and the description is placed between a <dd> (definition description) tag.

Below 3 terms are described:

<dl> 
	<dt> School </dt> 
	<dd> A place of learning </dd>
	<dt> HTML </dt>
	<dd> Hyper Text Markup Language - a set of tags and rules used in the 
	development of web pages </dd>
	<dt> New2HTML </dt>
	<dd> One of the best web tutorial websites around developed to bring
	forth an undertstanding of HTML and CSS  </dd>
</dl>

arrow  Click to see result

Practise Excercise

Produce the list of supermarket items below.

  • Fruits
    1. 3 Bananas
    2. 4 Apples
    3. 1 Melon
  • Drinks
    1. 1 Sprite
    2. 1 Coca-Cola
  • Other Items
    1. Food Items
      1. Chicken
      2. Bread
    2. Sauces
      1. Soy Sauce
      2. Oyster Sauce



Hope you have grasped the concepts and the three types of lists. In the next lesson we examine links.



    Previous Lesson Previous Lesson - Paragraphs                                         Next Lesson - Links Next Lesson