Using Lists in HTML

Lists are classified as being ordered, unordered or definition. An item of a list is created by using the <li> tag.

Ordered Lists

An ordered list consist of items 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.

<ol>
    <li>Flowers</li>
    <li>Trees</li>
    <li>Bees</li>
</ol>

Here’s what we get:

  1. Flowers
  2. Trees
  3. Bees

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.

An unordered list is defined by the <ul> tag.

<ul>
    <li>Banana Chips</li>
    <li>Apples</li>
    <li>White Rice</li>
    <li>Carrots</li>
    <li>Grapes</li>
</ul>

The Output:

  • Banana Chips
  • Apples
  • White Rice
  • Carrots
  • Grapes

Definition Lists

Use a definition list when giving a description for one or more list items. A list item is placed between a <dt> (definition term) tag and the description is placed between a <dd> (definition description) tag.

To define the list use the <dl> (definition list) tag.

<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>

Output:

School
A place of learning
HTML
Hyper Text Markup Language – a set of tags and rules used
in the development of web pages
New2HTML
One of the best web tutorial websites around developed to
bring forth an understanding of HTML and CSS

Pretty simple right? Let’s move on to the next lesson.