Creating lists and Indenting Text



In this lesson, you will learn how to create lists and indent text in your HTML document.

You will need three windows open on your screen at this time. A Internet Explorer window displaying this tutorial, an experimental window to view your HTML document, and a notepad window in which you will type the HTML document.

HTML supports unnumbered, numbered, and definition lists. You can also nest lists.

Unnumbered Lists

To make an unnumbered, bulleted list,

  1. Start the list with the <ul> Tag.
  2. Enter the <li> Tag (list item) before each item you want to list.
  3. End the list with the closing </ul> Tag.

For example, the following source:
<html>
<head>
<title>Unnumbered Lists </title>
</head>

<body>
<ul>
<li>bears
<li>birds
<li>bees
</ul>

</body>
</html>

looks as follows, viewed through Internet Explorer:


If you want an unnumbered list without the bullets, delete the <li> Tag at the beginning of each list item and put a <br> Tag at the end of each list item.

Click on the window containing your HTML document. Using the source above, create an unnumbered list without bullets. Save your changes, and open your document in your experimental window.

Numbered Lists

To create a numbered list also called an ordered list, it is identical to creating an unnumbered list except it uses the <ol> and </ol> Tags.

For example, the following source:

<html>
<head>
<title>Numbered List </title>
</head>

<body>
<ol>
<li>cherries
<li>apples
<li>grapes
</ol>

</body>
</html>

looks as follows, viewed through Internet Explorer:


It is your turn now.
Click on the window containing your HTML document. Create an unnumbered list of three of your favorite musicians and create a numbered list of three of your favorite sports. Save your changes.
When you are done open your document in the experimental window.

Nested Lists

You can nest any type of list inside another list. The following source will display a numbered list inside an unnumbered list.

For example, the following source:
<html>
<head>
<title>Nested Lists </title>
</head>

<body>
<ul>
<li>Bears 
	<ol>
	<li>polar
	<li>grizzly
	<li>teddy
	</ol>
<li>Birds 
	<ol>
	<li>sparrows
	<li>blue jays
	</ol>
<li>Bees
</ul>

</body>
</html>

looks as follows, viewed through Internet Explorer:


Definition Lists

A definition list requires three tags:



For example, the following source:
<html>
<head>
<title>Definition List </title>
</head>

<body>
<dl>
<dt>NCSA
<dd> NCSA, the Nation Center for Supercomputing Applications.
</dl>

</body>
</html>

looks as follows, viewed through Internet Explorer:


Indenting Text

You can use the <dl> Definition List Tag and then use the <dd>Definition Definition Tag for each indented line. You do not need to use the Definition Term Tag.

Another way to display text exactly how you type it in is by using the <pre> and </pre> Preformatted Text Tags. The Web browser will display the text exactly how it is typed in when it is contained in these tags.

For example, the following source:

<html>
<head>
<title>Preformatted Text </title>
</head>

<body>
<pre> 
	This text is indented.
</pre>

</body>
</html>

looks as follows, viewed through Internet Explorer: