You are here

There are three basic list types in HTML:

  1. The unordered list: This list has bullets (usually round) before each item in the list.
  2. The ordered list: This list has numbers before each item in the list.
  3. The definition list: This list has nothing before each item in the list.

The Unordered List:

The opening and closing tags for an unordered list are <UL> ...</UL>

Each item inside the list must also have a tag. This tag is the line item tag and it looks like this: <LI>

Here is a sample unordered list in HTML:

<UL>
<LI>apples
<LI>oranges
<LI>bananas
</UL>

Here is what that HTML looks like in a web browser:

  • apples
  • oranges
  • bananas

Notice that you must close the list with the </UL> tag, but you don't have to close the list item tags. Not too tough, huh? You can make the bullets into squares by adding an attribute to the opening <UL> tag. An attribute is something that is added to a tag to make it do something different, and you add a value to the attribute to tell the browser exactly what sort of attribute you want. To make squares, your HTML code will look like this:

<UL type="square">
<LI>apples
<LI>oranges
<LI>bananas
</UL>

Here is what that HTML looks like in a web browser:

  • apples
  • oranges
  • bananas

So the attribute type="square" (the value in this tag is "square") turns the round bullets into squares. Sorry, there are no values for triangles or polygons!

Notice that I typed the tag <UL> in uppercase and the attribute and its value type="square" in lowercase. This is so that I can immediately tell the tag from the attribute when I am looking at my HTML code.

The Ordered List:

The ordered list is a sequential list, using either numbers or letters. The opening and closing tags for an ordered list are <OL> ...</OL> (that's the letter O, not the number zero).

Like the unordered list, each item in the ordered list must also have a line item tag before each item.

Here is a sample ordered list in HTML:

<OL>
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

There are some attributes you can add to the opening <OL> tag. To make roman numerals, your HTML code will look like this:

<OL type="I">
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

So the attribute type="I" (that's a capital "I" for the value) turns the regular numbers into roman numerals.

Another attribute for the <OL> list is type="A". This turns the numbers in an ordered list into capital letters. Your code will look like this:

<OL type="A">
<LI>apples
<LI>oranges
<LI>bananas
</OL>

Here is what that HTML looks like in a web browser:

  1. apples
  2. oranges
  3. bananas

Remember, as with the unordered list you must close the list with the </OL> tag, but you don't need to close the list item tags.

The Definition List:

The definition list is a little different. It starts with this tag: <DL>, and the closing tag looks like this: </DL>. There are two item tags in a definition list; one indents the items and the other doesn't. They look like this:

<DT> - doesn't indent item
<DD> - indents items

So the HTML code for a definition list will look like this:

<DL>
<DT>apples
<DT>oranges
<DD>bananas
</DL>

And the list will look like this in a web browser:

apples
oranges
bananas

See how the word "bananas" is indented? That is what the <DD> item tag does.

Remember, as with the ordered and unordered lists you must close the list with the </DL> tag, but you don't need to close the item tags.

Okay, you are now ready to add some more HTML code to your web page. I am going to create a list of items that you would find on a library page. But you can substitute whatever items you feel belong on the page you are creating.

The following code will go between the <BODY>...</BODY> tags of your index.html file (so you need to make sure that Notepad is open and you can see your index.html file).

<UL>
<LI>Google
<LI>Librarians' Index to the Internet
<LI>Yahoo!
</UL>

After you have typed (or pasted) this code into your index.html file, be sure to SAVE your work in Notepad, then preview your index.html file in your web browser.

See my unordered list and check your page against it.

If you do not see the changes you made to your index.html file, go back to Notepad and be sure to Save. Once you are sure you saved your changes, come back to the browser and open or reload the index.html page.

Try changing the list in your index.html to an ordered list, then try a definition list. Here are variations of my index.html file using both types of lists: