Exit tutorial


HTML Tutorial
Web Design Stage 1: Using HTML Lists
Adding Bullet Points And Numbered Lists

Have you been wanting to add lists to your page? Well, here is the way to add those html lists to your web pages.

To begin, we need a tag to begin and end the entire list. For starters, let's use an unordered list. This will create a list with bullets next to the list items. The opening tag is <UL>, and the closing tag is.....yep, you guessed it...</UL>. Now, to set off each item in your list, you use the <LI> tag, followed by your text. Here is a sample list with two list items:

<UL>
<LI>I am item one
<LI>I am item two
</UL>

This will give us the bulleted list below:

  • I am item one
  • I am item two

Notice the <LI> tags do not require a closing tag. Also, the list is indented somewhat from the rest of the text. You can indent further by adding more <UL> tags, as long as you remember to close every one of them. Here is a sample of indenting further into the page:

<UL>
<UL>
<UL>
<LI>
I am item one
<LI>I am item two
</UL>
</UL>
</UL>

This will give us the following indented list:

      • I am item one
      • I am item two

Be careful about using the <CENTER> tag around your lists. If each list item is not the same length, you will get more of a mess than a straight list:

  • This is item one, how nice it is to be number one.
  • Item two is much shorter!
  • Item three is somewhere in between..

If you really need the list further in on the page, use the indention method above until it hits the center of the screen (this can mess up in different screen resolutions, though), or you can try using a table to align the text instead.

You can also use an ordered list in the same way you use the unordered list. Instead of using <UL> </UL>, you would use <OL> </OL>, like this:

<OL>
<LI>
Item 1
<LI>Item 2
<LI>Item 3
</OL>

This gives you a numbered list rather than the bulleted list:

  1. Item 1
  2. Item 2
  3. Item 3

[Back to the Stage 1 Index]