4.3. Unordered (Bulleted) Lists

Unordered lists are generally used to present lists whose order does not matter. For example, when listing the flavors of milkshakes available, you might use a list similar to the following:

  • Chocolate

  • Vanilla

  • Strawberry

  • Mocha

This same list can be implemented in HTML documents using the unordered list tag (<ul>), as shown in the following HTML code:

<ul>
  <li>Chocolate</li>
  <li>Vanilla</li>
  <li>Strawberry</li>
  <li>Mocha</li>
</ul>

Note that the use of the unordered list tag is very similar to the use of the ordered list tag—only the output is different, as shown in Figure 4-4.

Figure 4-4. Figure 4-4

4.3.1. Changing the List Item Marker

As you can with ordered lists, you can change the marker used to prefix each unordered list item. To do so, use the list-style-type property with one of the following values:

  • disc

  • circle

  • square

  • none

You can also use the list-style-image property to specify a graphic image for use as the list item marker.

Example: Changing the List Item Marker Example

This example shows how to change the list item marker, specifying one of the preset markers or a specific graphic image.

Source

The following code uses several different types of list markers:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Example Unordered List Markers</title> <style type="text/css"> ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial