Bulleted list

A bullet list is also referred to as an unordered list. Table 1 shows the tags needed to create an unordered list.

Table 1 an unordered list tags
Tag Purpose
<ul> Starts a bullet list
</ul> Ends a bullet list
<li> Specifies start of a list item
</li> Marks the end of a list item

Creating a bullet lists simple and is very similar to creating a numbered list. The following shows the involved in creating a bullet list:

  1. Insert these two tags into your XHTML code editor: <ul> and </ul>
  2. Copy or type all of your list items between those two tags
  3. Surround the text of each list item with <li> and </li> tags

In the following example, we use these three steps to construct a bullet list:

Step 1: <ul>
</ul>
 
Step 2: <ul>
Honda
Toyota
Ford
BMW
</ul>
 
Step 3: <ul>
<li>Honda</li>
<li>Toyota</li>
<li>Ford</li>
<li>BMW</li>
</ul>

The following shows the output of the finished bullet list:

  • Honda
  • Toyota
  • Ford
  • BMW

By default, bullet shape is used in front of each list item and thus the name bullet list. Listing character type, however, can be changed to a square or circle. See table 2 for the possible choices using the list attribute type to specify the listing character.

Table 2 bullet type list attributes
Attribute Explanation
type="disc" Specifies the bullet (disc) shape. This is the default shape.
type="circle" Specifies the circle shape
type="square" Specifies the square shape

To specify the listing shape, simply add the type attribute to the ul tag with one of the three possible values shown in table 2. Table 3 shows examples of each shape in use.

  Markup Output
 
Shape: disc <ul type="disc">
<li>XHTML</li>
<li>HTML</li>
<li>CSS</li>
<li>Java</li>
</ul>
  • XHTML
  • HTML
  • CSS
  • Java
 
Shape: circle <ul type="circle">
<li>Google</li>
<li>MSN</li>
<li>Yahoo</li>
<li>AltaVista</li>
</ul>
  • Google
  • MSN
  • Yahoo
  • AltaVista
 
Shape: square <ul type="square">
<li>January</li>
<li>February</li>
<li>March</li>
<li>April</li>
</ul>
  • January
  • February
  • March
  • April

Note the type attribute is added once to the opening ul tag for the entire list; it would be incorrect to add the type attribute to the opening li tag.