Unordered Lists

Unordered, or bulleted, lists, are probably the most common formatted list used on the Web today. They are quite simple to construct, using two tags: UL and LI. UL stands for "Unordered List", while LI stands for "Line Item". An entire list is contained within the opening and closing UL tags, and each bulleted point is enclosed within an opening and closing LI tag, as follows:

<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>

The above example would look like this when displayed in a web browser:

• Point 1
• Point 2
• Point 3

You may create sub-points for items on your list by using a nested unordered list; I've marked the nested list with comment tags, just to make the nesting clearer (you probably wouldn't need to mark the nested list with comments in the real world):

<ul>
<li>Point 1</li>
<li>Point 2</li>
<!-- begin nested list -->
<ul>
<li>Point 2.1</li>
<li>Point 2.2</li>
</ul>
<!-- end nested list -->
<li>Point 3</li>
</ul>

This is how the above example would look in your browser:

• Point 1
• Point 2
• Point 2.1
• Point 2.2
• Point 3

UL has one important attribute: TYPE. The TYPE attribute may be used to specify which type of bullets the list will display. There are three bullet types: disc (a regular bullet), circle (a hollow circle), and square (a hollow square).

Tag: UL
Attribute: TYPE
Values: disc, circle, square
Description: The TYPE attribute allows one to set the bullet type for an unordered list.
Example Opening UL Tag: <ul type="square">

By default, the main bullet points will come up with discs, the secondary (nested) bullet points will come up with circles, and the tertiary (nested within nested) bullet points will come up with squares. Here's an example list, illustrating the three default bullet types:

<h3>Reasons Why Our Boss is a Dud</h3>
<ul>
<li>He's Ugly</li>
<li>He's Stupid</li>
<ul>
<li>We tested his IQ at 80</li>
<li>He can't read words of more than two syllables</li>
</ul>
<li>He's Annoying</li>
<ul>
<li>He lobbed grenades at Greta last week</li>
<li>He snarled when asked about his gum disease</li>
<li>He forced us to watch "Funny Lady" five times</li>
<ul>
<li>which was boring.</li>
<li>and cruel</li>
<li>and unusual punishment</li>
</ul>
</ul>
<li>He makes Frankenstein seem Sophisticated.</li>
</ul>

Displayed:

Reasons Why Our Boss is a Dud

• He's Ugly
• He's Stupid
• We tested his IQ at 80
• He can't read words of more than two syllables
• He's Annoying
• He lobbed grenades at Greta last week
• He snarled when asked about his gum disease
• He forced us to watch "Funny Lady" five times
• which was boring.
• and cruel
• and unusual punishment
• He makes Frankenstein seem Sophisticated.

Here is the same list, using the TYPE attribute in the UL tags to mix up the types of bullets displayed in the lists:

<h3>Reasons Why Our Boss is a Dud</h3>
<ul type="square">
<li>He's Ugly</li>
<li>He's Stupid</li>
<ul type="disc">
<li>We tested his IQ at 80</li>
<li>He can't read words of more than two syllables</li>
</ul>
<li>He's Annoying</li>
<ul type="disc">
<li>He lobbed grenades at Greta last week</li>
<li>He snarled when asked about his gum disease</li>
<li>He forced us to watch "Funny Lady" five times</li>
<ul type="circle">
<li>which was boring.</li>
<li>and cruel</li>
<li>and unusual punishment</li>
</ul>
</ul>
<li>He makes Frankenstein seem Sophisticated.</li>
</ul>

Displayed:

Reasons Why Our Boss is a Dud

• He's Ugly
• He's Stupid
• We tested his IQ at 80
• He can't read words of more than two syllables
• He's Annoying
• He lobbed grenades at Greta last week
• He snarled when asked about his gum disease
• He forced us to watch "Funny Lady" five times
• which was boring.
• and cruel
• and unusual punishment
• He makes Frankenstein seem Sophisticated.

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.