Electric Type


About Us



Authoring   HTML Basics
Unordered Lists

<ul> begins an unordered list
<li> precedes each list item
</ul> closes the list

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:
<li> Chickens
<li> Llamas
<li> Pigs

And will appear on a browser like this:

Animals That Make Poor Office Pets:
  • Chickens
  • Llamas
  • Pigs

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:
<li>difficult to house train
<li>lay eggs in weird places

<li>always spitting
<li>can't sit in your lap while you work

<li>can up-end a desk with a toss of the head
<li>need office mudhole (maybe that's a plus?)

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:

<ul>Mona Lisa smiles
<ul><ul>and walks away.
</ul></ul></ul>Think about the words you meant to say.

We'll get:

    Mona Lisa smiles

        and walks away.

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>

Got a handle on it? Now try it yourself.

Learn More
View Source
Comment tags
Font color
Font size
Preformatted text
Background image
Background color
Line breaks
Aligning text
Adding/Aligning Images
Ordered lists
Unordered lists
Definition lists
Image borders
Wrapping text



Teaching Tools  




E Business  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!


© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.