HTML Working with Lists

There are three main types of list.

  1. Ordered Lists (Numbered Lists)
  2. Unordered Lists (Unnumbered Lists)
  3. Definition Lists

Unordered Lists

Unordered lists allow you to create lists with various bullet styles. An Unordered tag starts with the tag <ul> and end with </ul>. Between <ul> and </ul> tag we use <li> tag. The <li> tag is used to signify a list element. Below code demonstrates the unordered list:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li> Oranges</li>
<li> Bananas</li>
<li> Apples</li>
<li> Chocolates</li>
</ul>
</body>
</html>
The output is:
  • Bananas
  • Apples
  • Chocolates
  • Oranges

You can modify the look of the bullets by using the TYPE attribute in the <ul> tag. The TYPE attribute supports the following values: . For Example:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li> Bananas</li>
<li> Apples</li>
<li> Chocolates</li>
</ul>
</body>
</html>

Ordered Lists

Ordered lists allow you to create lists with various bullet styles. An Ordered tag starts with the tag <ol> and end with </ol>. Between <ol> and </ol> tag we use <li> tag. The <li> tag is used to signify a list element. Below code demonstrates the Ordered list:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ol>
<li> Bananas</li>
<li> Apples</li>
<li> Chocolates</li>
<li> Oranges </li>
</ol>
</body>
</html>
output:
  1. Bananas
  2. Apples
  3. Chocolates
  4. Oranges
Modifying the Bullet
  • You can modify the look of the bullets by using the TYPE or START attributes in the <ol> tag.
  • The TYPE attribute supports the following values: A, a, I, i, or 1.
  • The START attribute specifies at what point to start counting from.

Below code demonstrates the usage of the TYPE and START attributes.

Definition lists
Definition lists allow you to create lists that are more like glossary entries than hierarchies. The basic definition list involves four tags
  • The <dl> tag is used to open a definition list.
  • The <dt> tag is used to signify a definition term.
  • The <dd> tag is used to signify a definition term description
  • And the </dl> tag is used to end the list.

For example, the following code could be used to create a definition list:

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<B>Food</B>
<dl>
<dt>Vegetables
<dd>Vegetables are very good for you. They contain all sorts of essential vitamins.
<dt>Meat
<dd>Meat contains lots of proteins that your body needs.
</dl>
</body>
</html>

The previous code would produce the following HTML list.

Food
Vegetables
Vegetables are very good for you. They contain all sorts of essential vitamins.
Meat
Meat contains lots of proteins that your body needs. .

Bookmark This Page

Link Partners