Beginners guide to HTML

Lesson 2 - Lists

You can have lists with Bullets (•), Numbers, or indented text:

Bullet Lists

Before The List put a<ul>          Each item in a list will
start on a new line.
The list MAY be indented
Each item starts with<li>
At The End of The List put</ul>
<ul>
<li>This is an item in a list
<li>This is another item
<li>This is the last item
</ul>
Is typically displayed as:
  • This is an item in a list
  • This is another item
  • This is the last item

Numbered Lists

Before The List put a <ol>          Yes, Bullet and Numbered
lists are very similar
Each item starts with <li>
At The End of The List put</ol>
<ol>
<li>This is an item in a list
<li>This is another item
<li>This is the last item
</ol>
Is typically displayed as:
  1. This is an item in a list
  2. This is another item
  3. This is the last item

Definition Lists

A special form of list is a ”Definition List•, these consist of an item and a description for the item.

Before The List put a <dl>          Some browsers put the item
on the same line as the description,
some put them on separate lines.
Before each item put<dt>
Before each Description put<dd>
At The End of The List put</dl>
<dl>
<dt>Bread<dd>
Made from flour and Yeast, risen and then baked
<dt>Butter<dd>Made from churned Cream
</dl>
May be displayed as

Bread
Made from flour and Yeast, risen and then baked
Butter
Made from churned Cream

Nested Lists

Numbered, Bullet and definition lists can be nested.

<ol><li>Top level 1
<li>Top level 2
  <ol>
  <li> Second Level
    <ul>
    <li> Fact 1
    <li> Fact 2
    </ul>
  </ol>
<li>Top level 3
</ol>
This may be displayed like this:

  1. Top level 1
  2. Top level 2
    1. Second Level
      • Fact 1
      • Fact 2
  3. Top level 3


Next Lesson | Back to the index | Previous Lesson | Exercises


Home | Advice | Hosting

Updated 27th of March 2002