Unnumbered Lists

<ul> begins an unnumbered list
<li> precedes each list item
</ul> closes the list.
Like a lot of things in html, the <ul> tag is more than meets the eye. As its name suggests, it's good at structuring unnumbered (bulleted) lists. But it you can also use it as a margin-maker.

It is fairly easy to use. Every unnumbered list begins with the <ul> tag and ends with </ul>. In between, each list item should be set off with a <li> tag.

One thing to remember: The only things that can go inside an unnumbered list are <li> tags and their accompanying text. So if you're going to title your list, or write a little intro, you need to put it above the <ul> tag.

The HTML for a basic list would look something like this:

<p>Creating a Homepage:
<ul>
<li> Idea
<li> Text
<li> Graphics
</ul>

And will appear on a browser like this:

Creating a Homepage:

• Idea
• Text
• Graphics

If you have a long outline, you can nest lists inside each other. Just remember to turn off every <ul>.

<p>Creating a Homepage:
<ul>
<li>Idea
<ul>
<li>how will it look
<li>who is my audience
</ul>

<li>Text
<ul>
<li>what should I say
<li>serious or comical
</ul>

<li>Graphics
<ul>
<li>animated or still
<li>how will I find them
</ul></ul>

In a browser, it should look something like this:

Creating a Homepage:

Idea
how will it look
who is my audience
Text
what should I say
serious or comical
Graphics
animated or still
how will I find them

But, as we said earlier, the <ul> tag has another purpose: margins. By inserting the <ul> tag, without any other <li> tags, you can vary the left-hand margin:

So if we type:

<ul>You sure are
<p>
<ul><ul>trying hard.
<p>
</ul></ul></ul>You will be famous one day!

We'll get:
You sure are
trying hard.

You will be famous one day!

Note that several <ul>s were combined - pushing text farther to the right, and pulling it back in. And extra line breaks - indicated by the <br> tag - help space out the text. Just remember to finish what you start: Every <ul> must be closed with a corresponding </ul>.

And now for the Netscape extras!

Netscape has created tags that let you change the shape of your bullets. Keep in mind, however, that not all browsers support Netscape extensions. That means a nonsupporting browser will use a plain bullet, instead of the fancy shape you picked out.

The Netscape bullet options are:

<li type=disc>
<li type=circle>
<li type=square>

Return to Help Index

NOTE: Use of this Web Site or any Content or Services herein constitutes acceptance of the Conditions of Use and our Privacy Policy. ALL CONTENT Copyright © 2001-2004 NewbieHangout.com. World rights reserved. All material is subject to a liberal Creative Commons License. Please follow the guidelines and give credit where credit is due.