Html Tutorial Lesson 4: Types of HTML List

[Lesson 3]<<[Contents]>>[Lesson 5]

In HTML, If you wish to list out a number of items, you can use the unordered list and the ordered list. The element for the unordered list is UL and the element for the ordered list is OL.  The element for each item in the list is LI. Besides, if you wish to display a list of definitions, you can use the DL element together with the DT and DD elements.

4.1 The Unordered List

The unordered list is also called unnumbered list or bulleted list. The HTML structure for the unordered list is shown as follows

<ul> <li>item 1
<li>item 2
<li>item 3
</li>

*Note that the element li does not require a closing tag.

Example 4.1:

<!DOCTYPE html>
<html>
<head>
<TITLE>Unordered List</title>
</head>
<body>
<h2> Fruits</h2>
<hr>
<ul>
<li> Apple
<li> Grape
<li> Orange
<li> Pear
<li> Pineapple
<li> Water Melon
</li>
</body>
</html>

Copy and paste the above codes to your notepad and save the file as uorlist.html.
The output is as shown below:

Fruits


  • Apple
  • Grape
  • Orange
  • Pear
  • Pineapple
  • Water Melon

4.2 The Ordered List

Also known as the Numbered List. It is very similar in structure to the unordered list, except each list item has a number in front of it, instead of a bullet. Also, the opening tag for the list is <ol> instead of <ul>, and the closing tag is </ol> instead of </ul>. Modify the code in Section 4.1 by changing the tags <ul> to <ol> and </ul> to </ol> and change the title to ordered list. Save the file as orlist.html.

The output is as shown below:

Fruits


  1. Apple
  2. Grape
  3. Orange
  4. Pear
  5. Pineapple
  6. Water Melon

4.3 The Nested List

This nested list contains lists within lists.

Example 4.2:

<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h1 align="center"><u> Internet Club</u></h11>
<ol>
<li>dvisers
<ul>
<li> Mr. Liew
<li> Mrs James
<li>Miss Irene
</ul>
<li>Committee Members
<ul>
<li>Nick
<li>George
<li>Francis
</ul>
</ol>
</body>
</html>

Copy the code above and paste them to your notepad. Save the file as nested.html

The output is as shown below:

  1. Advisers
    • Mr. Liew
    • Mrs James
    • Miss Irene
  2. Committee Members
    • Nick
    • George
    • Francis

4.4 Definition List

Definition list comprises a list of definitions or terms and their descriptions.  The elements are:

dl– The element for creating a definition list

dt– The element for creating a definition or term

dd– The element for displaying the description of a term

The structure can be illustrated in the following example:

Example 4.3

<dl>
<dt><b>Internet</b>
<dd>A network of millions of computers connected together to share information.
<dt><b>HTML</b>
<dd>Hypertext Markup Language
<dt><b>JavaScript</b>
<dd>A scripting language that works with HTML to enhance web pages
</dl>

* The dt and dd elements do not require the closing tags
The output:

Internet
A network of millions of computers connected together to share information.
HTML
Hypertext Markup Language
JavaScript
A scripting language that works with HTML to enhance web pages

[Lesson 3]<<[Contents]>>[Lesson 5]