HTML Bulleted or Unordered List

By Stephen Bucaro

One of the most common structures found on a webpage is a list. A list can be used to organize and clarify information. There are three kinds of lists; the ordered list, which in which every item is preceded by a number or letter, the definition list which has two parts for each item, the term and the definition, and the unordered list which is commonly known as the bulleted list.

The unordered list is defined by the <ul> </ul> tag pair. Each list item is defined by a <li> </li> tag pair and the list items are automatically bulleted by the browser. By default the list items are prefixed by a small filled disc bullets. The code for an unordered list is shown below.

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

• List item 1
• List item 2
• List item 3

Use the type Attribute to Specify Square Bullets

Using the type attribute set to "square", you can make the browser bullet the list with square bullets as shown below.

<ul type="square">
<li<List item 1</li>
<li<List item 2</li>
<li<List item 3</li>
</ul>

• List item 1
• List item 2
• List item 3

Use the type Attribute to Specify Circle Bullets

Using the type attribute set to "circle", you can make the browser bullet the list with small circle bullets as shown below.

<ul type="circle">
<li<List item 1</li>
<li<List item 2</li>
<li<List item 3</li>
</ul>

• List item 1
• List item 2
• List item 3

Below is a list of type attribute values for the unordered list.

disc = filled disc bullets
circle = circle bullets
square = square bullets
none = no bullets

Use the type Attribute to Specify Individual Bullets

Shown below is an example of using the <ul> tags type attribute to set the bullets for the list to square, and then using one of the <li> tag's type attribute to override that and set that one item's bullet to a circle.

<ul type="square">
<li>List item 1</li>
<li type="circle">List item 2</li>
<li>List item 3</li>
</ul>

• List item 1
• List item 2
• List item 3

RSS Feed

 General Web Design
 HTML Design
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues
 FREE Graphics Warehouse