Information - Resources - Tools - Strategies

for developing a profitable Web business

Tutorials | Creating Lists

HTML: Creating Lists

The list style is an effective way to display important information on your Web page. It allows you to cut to the chase and present sections of content in a short, snappy manner. Its presentation also tends to draw the viewer's eye and makes it easier for her to retain what is written.

There are basically three types of lists:

  1. Ordered (Numbered)
  2. Unordered (Bulleted)
  3. Definition

Let's take a look at each one in turn.


The Ordered (Numbered) List

Most HTML lists are created following the same format. First the list type is defined by a start tag, followed by the list item tags, then closed with an end tag.

Format:

    <ol>Start tag for list type
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ol>End tag for list type

Example:

    <ol>
        <li>Item number one</li>
        <li>Item number two</li>
        <li>Item number three</li>
    </ol>

Display:
  1. Item number one
  2. Item number two
  3. Item number three

NOTE: In an ordered list, a number (1, 2, 3...) is placed in front of each item by default. You may add new items whenever or wherever you wish in the list. The list items will be renumbered automatically.


The Unordered (Bulleted) List

The unordered list is created in the same way as an ordered list, except the container tag is <ul> and the list items are bulleted by default.

Example:

    <ul>
        <li>Item number one</li>
        <li>Item number two</li>
        <li>Item number three</li>
    </ul>

Display:

  • Item number one
  • Item number two
  • Item number three

The Definition List

The definition list is slightly different from the other types in that it contains three main tags instead of two.

  1. The <dl> tag defines the definition list
  2. The <dt> tag begins the definition term
  3. The <dd> tag details the definition

The terms in a definition list are left-aligned, while the actual definitions are displayed below the terms and are indented from the left, making this particular setup suitable for a glossary or dictionary-type presentation.

Example:

<dl>
    <dt>
John William Coltrane, tenor sax;
      <dd>Studied E-flat alto horn, clarinet then saxophone in high school. Became an important and influential figure in the world of jazz.
    <dt>William "Bill" J. Evans , piano, composer;
      <dd>Studied piano, violin, flute. Revered as a pianist and composer of great distinction. Credited with rare originality and taste.
    <dt>Milton "Bags" Jackson, vibraharp, also piano, guitar;
      <dd>Studied music at Michighan State University. Established his professional and artistic identification as a member of the Modern Jazz Quartet.
</dl>

Display:

John William Coltrane, tenor sax;
Studied E-flat alto horn, clarinet then saxophone in high school. Became an important and influential figure in the world of jazz.
William "Bill" J. Evans, piano, composer;
Studied piano, violin, flute. Revered as a pianist and composer of great distinction. Credited with rare originality and taste.
Milton "Bags" Jackson, vibraharp, also piano, guitar;
Studied music at Michighan State University. Established his professional and artistic identification as a member of the Modern Jazz Quartet.

NOTE: We have added the phrase elements <strong> and <em> to the code in this example. That's why the musicians' names are displayed in bold and the instruments in italics. It introduces an interesting contrast and enhances the presentation.


« Previous  ¦  Next »




 

Newsletter

Name:

Email:

Useful Stuff
Ponder This

It's a cinch by the inch but hard by the yard. Take one baby step at a time in the pursuit of your dreams until they become your reality.