Lists

HTML

Lists

Other Links
 .

Sometimes we would like to organize test in the form of lists. In HTML we have the ability to have ordered lists, unordered lists and definition lists.

An unordered list is a list of items marked with bullets which are typically small black circles.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

This HTML Code Produces This Unordered List
<ul>
<li>Cat</li>
<li>Dog</li>
</ul>
  • Cat
  • Dog

We can change the appearance of the bullets in this list by adding the "type" property to the <ul> tag.

This HTML Code Produces This Unordered List
Circle bullets list:
<ul type="circle">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ul>

Disc bullets list:
<ul type="disc">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ul>

Square bullets list:
<ul type="square">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ul>

Circle bullets list:
  • Cat
  • Dog
  • Hamster
  • Parrot
Disc bullets list:
  • Cat
  • Dog
  • Hamster
  • Parrot

Square bullets list:

  • Cat
  • Dog
  • Hamster
  • Parrot

Ordered Lists are lists where the list items are marked with numbers or letters.

This HTML Code Produces This Ordered List
Numbered list:
<ol>
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ol>

Letters list:
<ol type="A">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ol>

Lowercase Letters list:
<ol type="a">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ol>

Roman Numbers list:
<ol type="I">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ol>

Lowercase Roman Numbers list:
<ol type="i">
  <li>Cat</li>
  <li>Dog</li>
  <li>Hamster</li>
  <li>Parrot</li>
</ol>

Numbered list:
  1. Cat
  2. Dog
  3. Hamster
  4. Parrot

Letters list:

  1. Cat
  2. Dog
  3. Hamster
  4. Parrot

 

Lowercase Letters list:

  1. Cat
  2. Dog
  3. Hamster
  4. Parrot

Roman Numbers list:

  1. Cat
  2. Dog
  3. Hamster
  4. Parrot

Lowercase Roman
Numbers list:

  1. Cat
  2. Dog
  3. Hamster
  4. Parrot

The last type of list we will look at is called a definition list. A definition list is not a list of items but a list of terms and a definition or explanation of the term.

A definition list starts with the <dl> tag. Each definition list term starts with the <dt> tag. Each definition list definition starts with the <dd> tag.

This HTML Code Produces This Definition List
<dl>
<dt>Feline</dt>
<dd>Cat</dd>
<dt>Canine</dt>
<dd>Dog</dd>
</dl>
Feline
Cat
Canine
Dog

.

Home | About | Contact Us | Sitemap

Lists