HTML 3.2 by Example

Let us experiment with lists a bit here.

An unordered list shows items with a plain bullet before them:

<UL>
  <LI>Oleg
  <LI>Paula
  <LI>James
</UL>

  • Oleg
  • Paula
  • James
 

We have some control over the exact appearance of the bullets:

<UL>
  <LI TYPE="circle">Oleg
  <LI TYPE="square">Paula
  <LI TYPE="disc">James
</UL>

  • Oleg
  • Paula
  • James
 

We can arrange the same items in an ordered list:

<OL>
  <LI>Oleg
  <LI>Paula
  <LI>James
</OL>

  1. Oleg
  2. Paula
  3. James
 

We can also set the value of the first item in the list:

<OL START="3">
  <LI>Oleg
  <LI>Paula
  <LI>James
</OL>

  1. Oleg
  2. Paula
  3. James
 

And we can change the numerical value of any subsequent list items:

<OL START="3">
  <LI>Oleg
  <LI VALUE="7">Paula
  <LI>James
</OL>

  1. Oleg
  2. Paula
  3. James
 

And we also have some control over the ordered list numbering system: we can use regular (Arabic) numberals as well as Roman ones (uppercase and lowercase) and Latin alphabetic characters (uppercase and lowercase).

<OL TYPE="A">
  <LI>Oleg
  <LI TYPE="a">Paula
  <LI TYPE="I">James
  <LI TYPE="i">Shauna
  <LI TYPE="1">Robert
</OL>

  1. Oleg
  2. Paula
  3. James
  4. Shauna
  5. Robert
 

We can also arrange items in so-called definition lists, whose elements consist of two parts: words (terms) and their definitions:

<DL>
  <DT>Oleg
   <DD>A cool guy with an M.S. in Information Science
  <DT>Anna
   <DD>An equally cool girl with an M.S. in Economics
</DL>

Oleg
A cool guy with an M.S. in Information Science
Anna
An equally cool girl with an M.S. in Economics
Note the indentation that the items marked with DD tags have.

 

We can also nest different types of lists:

<UL>
  <LI>Oleg
    <OL>
     <LI>Cool
     <LI>Smart
    </OL>
  <LI>Anna
    <OL>
     <LI>Sharp
     <LI>Pretty
    </OL>
  <LI>Paula
<UL>