Like all of our favorite things, the <ul> tag is more than meets the eye. As its name suggests, it's quite adept at structuring unordered (bulleted) lists. But it also moonlights as a margin-maker, as we'll see below.
The intended purpose is fairly easy to achieve. Every unordered 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 unordered 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>Animals That Make Poor Office Pets:
<ul>
<li> Chickens
<li> Llamas
<li> Pigs
</ul>
And will appear on a browser like this:
Animals That Make Poor Office Pets:
If you have a long outline, you can nest lists inside each other. Just remember to turn off every <ul>.
<p>Animals That Make Poor Office Pets:
<ul>
<li>Chickens
<ul>
<li>difficult to house train
<li>lay eggs in weird places
</ul>
<li>Llamas
<ul>
<li>always spitting
<li>can't sit in your lap while you work
</ul>
<li>Pigs
<ul>
<li>can up-end a desk with a toss of the head
<li>need office mudhole (maybe that's a plus?)
</ul></ul>
In a browser, it should look something like this:
Animals That Make Poor Office Pets:
- Chickens
- difficult to house train
- lay eggs in weird places
- Llamas
- always spitting
- can't sit in your lap while you work
- Pigs
- can up-end a desk with a toss of the head
- need office mudhole (maybe that's a plus?)
But, as we implied earlier, the <ul> tag has a secondary purpose: margins. By inserting the <ul> tag, without any accompanying <li> tags, you can vary the left-hand margin:
So if we type:
We'll get:
Think about the words you meant to say.
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 extension portion of our program:
Netscape has created tags that let you change the shape of your bullets (for those of you actually making bulleted lists). Keep in mind, however, that not all browsers support Netscape extensions. That doesn't mean disaster will strike if you use them
- it just means a nonsupporting browser will use a plain bullet, instead of the fancy-dan shape you picked out.
The Netscape bullet options are:
- <li type=disc>
- <li type=circle>
- <li type=square>
