A Complete Guide to Web Design

Lists 119

Formatting

Text

Lists

Web Design in a Nutshell, eMatter Edition

Lists and the items within them are block-level elements, meaning that line spaces
will automatically be added before and after them. Extra space may be added
above and below the entire list element but, in general, if you want to add space
between individual list items, you need to insert a

tag between them
(although, technically, that is not good HTML form).

Unordered (Bulleted) Lists

An unordered list is used for a collection of related items that appear in no partic-
ular order. List items are displayed on an indent with a bullet preceding each list
item. The bullet shape is automatically inserted by the browser when it encoun-
ters the list item, so you do not need to type a bullet character into your HTML
source code.

An unordered list is delimited by the

...

tags, with each item indi-
cated by an

tag. The closing

tag is usually omitted, but it should be
included if you are using Style Sheets to control list item display.

Figure 7-4 shows the structure and display of a simple unordered list.

Changing the bullet shape

HTML provides only a minimal amount of control over the appearance of bullets.
You can change the shape of the bullets for the whole list by using thetype
attribute within the

tag. Thetypeattribute allows you to specify one of
three shapes: disc (the default), square, or circle. Figure 7-5 shows discs (left),
circles (center), and squares (right).



Thetypeattribute can be applied within a list-item tag (

• ) to change the
  shape of the bullet for that particular item. Figure 7-6 shows this effect.
  
  

  Figure 7-4: A simple unordered list

  
  

  Figure 7-5: Bullet types changed with the TYPE attribute

  
  

  <B>Shopping List</B>
  
  <UL>
  
  <LI>Avocados
  
  <LI>Tomatoes
  
  <LI>Scallions
  
  <LI>Black beans
  
  </UL>

  
  

  <UL TYPE= disc >... <UL TYPE= circle >... <UL TYPE= square >...