Unordered (Bulleted) Lists - HTML

Unordered lists are similar to numbered lists except that they use bullets instead of numbers or letters before each list item. Bulleted lists are generally used when providing a list of nonsequential items. For example, consider the following list of ice cream flavors:

  • Vanilla
  • Chocolate
  • Strawberry

Unordered lists use the unordered list tag (<ul>) to delimit the entire list and the list item tag (<li>) to delimit each individual list item.

In the preceding example, the list has three elements each preceded with a small,round, filled bullet. This is the default for unordered lists in HTML, as shown in thefollowing code, whose output is shown:

An example of an unordered list.

An example of an unordered list.

Unordered lists also support the list-style-type property, but with slightly different values:

  • disc
  • circle
  • square
  • none

The default bullet type is disc, though the client browser can define the default differently. The different bullet types are shown in;

An example of the different bullet types for unordered lists.

An example of the different bullet types for unordered lists.

As with ordered lists, you can define the list-style-position property, which in the case of unordered lists controls where the bullet appears—outside or inside the left margin of the ite For example, to move the bullet inside the item margins you would use a style with the <ul> tag similar to the following:

Unordered lists support one other type of bullet for each item, an image. The image for use in unordered lists must fit the following criteria:

  • Be accessible to the document via HTTP (be on the same Web server or deliverable from another Web server)
  • Ben a suitable format for the Web (jpg, gif, or png)
  • Be sized appropriately for use as a bullet

To specify an image for the list, you use the list-style-image property. This property has the following syntax:

list-style-image: url(url_to_image);

This property can be used to add more dimension to standard bullets (for example, creating spheres to use instead of circles) or to use specialty bullets that match your content. For example, consider the two graphics shown in Figure, created in Jasc’s Paint Shop Pro.

Two graphics that can be used as bullets.

Two graphics that can be used as bullets

Of course, the graphics must be scaled down to “bullet” size and saved in a Web-friendly format. In this case, the graphics are reduced to 10-20 pixels square and saved on the root of the Web server as sphere.jpg and cone.jpg. The following code uses the images, and the output.

Using graphics in unordered lists.

Using graphics in unordered lists.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics