Using HTML

Lists

To create a list in HTML we use List tags. The tags look like this:

  1. <OL> Ordered (numbered) list
  2. <UL> Unordered (bulleted) list
  3. <LI> A list item in any list

Unordered lists

Exercise

HTML

<HTML>
<HEAD>
<TITLE>Unordered List</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Mammals </LI>
<LI> Reptiles </LI>
<LI> Birds </LI>
</UL>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li> Mammals </li>
<li> Reptiles </li>
<li> Birds </li>
</ul>
</body>
</html>

Unordered lists are bulleted lists, with no numbering.

Ordered Lists

Exercise

Just change the <UL> to <OL>, and </UL> to </OL>to create an ordered list.

HTML

<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
<OL>
<LI> Mammals </LI>
<LI> Reptiles </LI>
<LI> Birds </LI>
</OL>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
 <li> Mammals </li>
<li> Reptiles </li>
<li> Birds </li>
</ol>
 </body>
</html>

Ordered lists are numbered from 1 upwards.

Nested Lists

It is also possible to have nested lists - lists within lists. Each nested list sits inside a list item of the previous list.

Exercise

HTML

<HTML>
<HEAD>
<TITLE>Nested List</TITLE>
</HEAD>
<BODY>
<OL>
<LI> Mammals
<OL>
<LI>Cats </LI>
<LI>Dogs </LI>
<LI>Whales </LI>
</OL>
 </LI>
<LI> Reptiles
<OL>
<LI>Snakes </LI>
<LI>Turtles </LI>
<LI>Iguanas </LI>
</OL>
 </LI>
<LI> Birds
<OL>
<LI>Emus </LI>
<LI>Parrots </LI>
<LI>Vultures </LI>
</OL>
 </LI>
</OL>
</BODY>
</HTML>

XHTML

<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li> Mammals
<ol>
<li>Cats </li>
<li>Dogs </li>
<li>Whales </li>
</ol>
</li>
<li> Reptiles
<ol>
<li>Snakes </li>
<li>Turtles </li>
<li>Iguanas </li>
</ol>
 </li>
<li> Birds
<ol>
<li>Emus </li>
<li>Parrots </li>
<li>Vultures </li>
</ol>
 </li>
</ol>
</body>
</html>

The next thing to learn is how to create data tables.