Learn Scripting Languages from the Master!
PrintBulleted 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:
- Insert these two tags into your XHTML code editor: <ul> and </ul>
- Copy or type all of your list items between those two tags
- 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>
|
|
| Shape: circle |
<ul type="circle">
<li>Google</li><li>MSN</li><li>Yahoo</li><li>AltaVista</li>
</ul>
|
|
| Shape: square |
<ul type="square">
<li>January</li><li>February</li><li>March</li><li>April</li>
</ul>
|
|
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.