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
Using a Trick to Create Colored Bullets
- • List item 1
- • List item 2
- • List item 3
Shown below is HTML code to create a bullet. It uses the character code for a bullet (•) and the character code for a non-breaking space ( ).
<b><font color="blue">• </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.
- • List item 1
- • List item 2
- • List item 3
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>
- List item 1
- List item 2
- List item 3
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>
- List item 1
- List item 2
- List item 3
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.
More HTML Code:
• Aligning an Image on Your Web Page
• HTML Blockquote Basics
• HTML Horizontal Rule
• Easy Form Design
• Use HTML Target Attribute to Specify Where to Open Document
• HTML5 role Attribute
• The Font Tag
• Changing the Size of an Image on Your Webpage
• Set Form Controls Tab Order With tabindex Attribute
• Radio Button Basics