Lists
To create a list in HTML we use List tags. The tags look like this:
- <OL> Ordered (numbered) list
- <UL> Unordered (bulleted) list
- <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.
created & designed by Vivienne Trulock for ilikecake.net
.
.