Welcome to ITarama - HTML lists

This site proudly sponsored by:

Other ITarama affiliates:


ITarama recommends:

HTML lists

We will now briefly discuss lists. There are three kinds of lists. They are:

Unordered lists
Ordered lists (like the one you are now reading)
Definition lists

Unordered Lists

First up is the unordered list. It looks like this:

This is the first bullet
This is the second bullet
This is the third bullet
This is the fourth bullet
And on and on...

The markup for the above unordered list is:

<ul>
  <li>This is the first bullet</li>
  <li>This is the second bullet</li>
  <li>This is the third bullet</li>
  <li>This is the fourth bullet</li>
  <li>And on and on...
</ul>

The <ul> </ul> tags turn the unordered list on and off and the <li> tags contain the list items.

Ordered Lists

As you can see ordered lists are numbered by default. They can also be displayed with letters. The syntax used to create the ordered list above is:

<ol>
  <li>Ordered lists (like the one you are now reading)</li>
  <li>Unordered lists (which we will see shortly)</li>
  <li>Definition lists</li>
</ol>

The <ol> </ol> tags turn the ordered list on and off and the <li> tags define the list items.

Definition Lists

Next up is the definition list. It looks like this:

IT-arama: A cool and fun web-site
985 computing: User-friendly computer consulting
BobbyRegan.com: Extreme Web design

The markup used to create the above looks like this:

<dl>
  <dt>IT-arama<dt>
    <dd>A cool and fun web-site<dd>
  <dt>985 computing<dt>
    <dd>User-friendly computer consulting<dd>
  <dt>BobbyRegan.com<dt>
    <dd>Extreme Web design<dd>
</dl>

Where the <dl> and the </dl> tags are used to begin and end the definition list and the <dt> tag is used for each term to be defined and the <dd> tag is used for each terms definition.