Lesson 4: Types of HTML Lists

❮ Previous Lesson Next Lesson ❯

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>
<li>item 2</li>
<li>item 3</li>
</ul>

*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>
<li> Grape</li>
<li> Orange</li>
<li> Pear</li>
<li> Pineapple</li>
<li> Watermelon</li>
</ul>
</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
Watermelon

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 as shown below. Save the file as orlist.html.

<ul>
<li> Apple</li>
<li> Grape</li>
<li> Orange</li>
<li> Pear</li>
<li> Pineapple</li>
<li> Watermelon</li>
</ul>

The output is as shown below.

Fruits

Apple
Grape
Orange
Pear
Pineapple
Watermelon

4.3 The Nested List

This nested list contains lists within lists, as shown in Example 4.2.

Example 4.2:

<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h1 align="center"><u> Internet Club</u></h1>
<ol>
<li>Advisers</li>
<ul>
<li> Mr. Liew</li>
<li> Mrs James</li>
<li>Miss Irene</li>
</ul>
<li>Committee Members</li>
<ul>
<li>Nick</li>
<li>George</li>
<li>Francis</li>
</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:

Internet Club

Advisers

Mr. Liew
Mrs James
Miss Irene

Committee Members

Nick
George
Francis

4.4 Definition List

The 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

❮ Previous Lesson Next Lesson ❯