Sponsored Links

Block Level Elements - Lists

HTML offers three mechanisms for defining lists:

• Ordered Lists
• Unordered Lists
• Definition Lists

Ordered and Unordered Lists

Defining an ordered and unordered lists only differs based on the container element you use. <UL> defines an unordered list, and <OL> defines an ordered list. Each item in the list is defined with the <LI> (list item) element. When authoring a list, the <UL> and <OL> elements should only contain list item elements. List item elements can contain other lists and block elements. This is demonstrated by the example below:

Ordered Lists	Unordered Lists
Item 1 Item 2 Sub-item 2a Sub-item 2b Item 3 <OL> <LI>Item 1 <LI>Item 2 <UL> <LI>Sub-item 2a <LI>Sub-item 2b </UL> <LI>Item 3 </OL>	Item 1 Item 2 Sub-item 2a Sub-item 2b Item 3 <UL> <LI>Item 1 <LI>Item 2 <UL> <LI>Sub-item 2a <LI>Sub-item 2b </UL> <LI>Item 3 </UL>

Definition Lists (<DL>)

Definition lists usually define a term and its definition. A definition list is defined with the <DL> element and can contain one or many <DT> (term) and <DD> (definition) elements. For example:

UL

Defines an unordered list

OL

Defines an ordered list

DL

Defines a definition list

  <DL>
    <DT>UL
    <DD>Defines an unordered list
    <DT>OL
    <DD>Defines an ordered list
    <DT>DL
    <DD>Defines a definition list
  </DL>

Custom Bulleted Lists

A common abuse of tables is to create lists where the bullet is a GIF. The first column of the table contains the GIF bullet, and the second column contains the contents. Usually the GIF is entirely presentational and does not add value to the content. When this is the case, a standard list should be used. The bullet in the standard list can be replaced with a GIF using CSS 1.0. This is shown below:

• Chapter 1
• Chapter 2

The above list with the custom bullet is defined as follows. If this list is being viewed in a browser that is not CSS 1.0 compliant, the standard bullets are displayed.

  <UL STYLE="list-image: URL(/gifs/doc.gif)">
    <LI>Chapter 1
    <LI>Chapter 2
  </UL>

So far we have introduced how you separate blocks or paragraphs of content. Next we look at how you markup the contents within a paragraph. This includes how you add emphasis to particular words, mark revisions, and more.

Inline Elements...