Lists

There are 3 different types of lists. <ol>, <ul> and <dl>.

<ul> - unordered list with dots

<ol> - ordered list with numbers or letters

<dl> - definition list with dots

Ordered list

Between <ol> and </ol> you put <li>....</li> elements of a list. Each <li> represents one element of ordered list.

Colours:

<ol>

<li> black </li>

<li> white </li>

<li> orange </li>

<li> purple </li>

<li> blue </li>

</ol>

As a result:

Colours:

1. black

2. white

3. orange

4. purple

5. blue

You can also choose other characters instead of numbers:

<ol type="a">

<ol type="A">

<ol type="i">

<ol type="I">

If you use the example from above with <ol type="A">, here is a result

A. black

B. white

C. orange

D. purple

E. blue

Unordered list

An unordered list starts and ends with <ul> tag. Each list item starts with the <li> tag.

The list items could be marked with bullets (small black circles), squares or you can add no item for you list items.

<ul type="square">

<ul type="circle">

<ul type="disc">

<ul type="none">

For example, HTML code for unordered list would look like this:

<ul type="circle">

<li> black </li>

<li> white </li>

<li> orange </li>

<li> purple </li>

<li> blue </li>

</ul>

And here is a result:

·         black

·         white

·         orange

·         purple

·         blue

Description list

A description list is a list of elements with description for each element within it. In description list, <dl> tag is tag that defines description list, while <dt> defines a term or name and <dd> defines a description for every <dt> tag or element.

Here is an example of description list:

<dl>

  <dt>Dog</dt>

      <dd>- man's best friend</dd>

  <dt>Cow</dt>

      <dd>- producing a milk</dd>

  <dt>Chicken</dt>

      <dd>- gives us eggs</dd>

</dl>

And here is a result:

Dog

      - man's best friend

Cow

      - producing a milk

Chicken

     - gives us eggs