Menu
HTML Bulleted or Unordered List

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>

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>

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>

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>

Using a Trick to Create Colored Bullets

Shown below is HTML code to create a bullet. It uses the character code for a bullet (&bull;) and the character code for a non-breaking space (&nbsp;). 

<b><font color="blue">&bull;&nbsp;</font></b>

In the code shown below, I set the list's type attribute to "none", then I prefixed each item in the list with the code for a bullet.

<ul type="none">
<li><b><font color="red">• </font></b>List item 1</li>
<li><b><font color="green">• </font></b>List item 2</li>
<li><b><font color="blue">• </font></b>List item 3</li>
</ul>

In the code above, I used the <font> tag to set the bullets color. Since the <font> tag is deprecated, meaning it may not work in future browsers, it's better to set the bullets color using style code as shown below.

Using Custom Graphic Bullets

Similar to how I set the type attribute above to none and then prefixed each list item above with a span, you could prefix each list item with an HTML img tag to give your list custom graphic bullets. However, an experienced Web designer would use style to set the images shown below.

<ul style="list-style-image:url(path/imagename)">   
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

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

<ul style="list-style-image:url(path/imagename)">   
<li>List item 1</li>
<li style="list-style-image:url(path/imagename)">List item 2</li>
<li>List item 3</li>
</ul>

Note: If your custom graphic bullets don't show up, check the path to your image. If the browser can't find the image at the path specified, it goes back to using the default black dot bullets.


Learn more at amazon.com

More HTML Code:
• XHTML Basics
• Use Meta Tags for Search Engine Optimization
• Checkbox Basics
• HTML5 Header Element
• Set Form Controls Tab Order With tabindex Attribute
• Introduction to HTML
• The HTML Head Tag
• Providing Alternate and Title Text for an Image
• Easy Code to Add Google Site Search to Your Website
• How to Write and Run HTML