Lists

Three types of lists are supported in HTML; they are Definition, Unnumbered and Numbered lists. Many new variations of these lists are achievable using CSS.

Definition List

The Definition list consists of a line of left justified text followed by an indented paragraph explaining it. The format for a Definition list is:

<dl>
<dt>definition term</dt>
<dd>definition data</dd>
<dt>definition term</dt>
<dd>definition data</dd>
</dl>

For example, to create this Definition list:

DO
A deer, a female deer.
RE
A drop of golden sun.
MI
A name I call myself.
FA
A long, long way to run.
SO
A needle pulling thread.
LA
A note to follow SO.
TI
A drink with jam and bread.

The HTML code is:

<dl>
<dt>DO</dt>
<dd>A deer, a female deer.</dd>
<dt>RE</dt>
<dd>A drop of golden sun.</dd>
<dt>MI</dt>
<dd>A name I call myself.</dd>
<dt>FA</dt>
<dd>A long, long way to run.</dd>
<dt>SO</dt>
<dd>A needle pulling thread.</dd>
<dt>LA</dt>
<dd>A note to follow SO.</dd>
<dt>TI</dt>
<dd>A drink with jam and bread.</dd>
</dl>

Unnumbered List

The Unnumbered or bulletted list resembles presentations produced with Powerpoint® or similar products. The format for an unnumbered list is:

<ul {type="disc|circle|square"}>
list header
<li {type="disc|circle|square"}>list item</li>
...
</ul>

TYPE determines what style of bullet is used. CSS The default bullet is generally the disc (filled circle). TYPE is not supported by some early Web browsers. An example of a simple Unnumbered list is:


Any list can be nested. In the above example I could use nesting to explain details about each item

The HTML code for this list is:

<ul>
List of stuff in my desk drawer
<li>pencils
<ul>
<li>#2</li>
<li>#4</li>
<li>mechanical
<ul type=square>
<li>.05 mm lead</li>
<li>.07 mm lead</li>
</ul></li>
</ul></li>
<li>pens
<ul>
<li>blue</li>
<li>black</li>
<li>red</li>
</ul></li>
<li>scotch tape</li>
<li>fasteners
<ul>
<li>thumb tacks</li>
<li>paper clips</li>
<li>staples</li>
</ul></li>
</ul>

In most browsers, the type of bullet will vary automatically when you nest unnumbered lists. Note the position of the closing </li> on the nested lists; the nested list is considered part of the list item in which it is nested.

Numbered List

The Numbered or ordered list is similar to an Unnumbered list except it uses sequential numbers in place of bullets. The format for a Numbered list is:

<ol start="#" type="1|A|a|I|i" reversed>
list header
<li value="#" type="1|A|a|I|i">list item</li>
...
</ol>
    List of numbering styles CSS
  1. type=1
  2. type=A
  3. type=a
  4. type=I
  5. type=i
  6. type=1 value=27

TYPE determines whether the count is Arabic numbers, letters or Roman numerals.
START determines the initial numeric value of the list.
VALUE determines the numeric value of the entry and is always an integer number even if you are using letters or Roman numerals. An example of a Numbered list is:

    The default TYPE is numbers and the default value is one
  1. one
  2. two
  3. three
      The default TYPE remains numbers even when nested (start =8)
    1. one
    2. two
    3. three
        This is an example of alphabetic counting
      1. one
      2. two
      3. three
      4. you can change the value at any point (value=27)
      5. counting continues from that point
      6. note that alphabetic counting can continue beyond 26.
          This is an example of Roman numeral counting
        1. one
        2. two
        3. three
        4. four
      7. counting resumes after each nested list is terminated
    4. four
    5. five
  4. four
The HTML code for this list is:

<ol>
The default TYPE is numbers and the default value is one
<li>one</li>
<li>two</li>
<li>three
<ol>
The default TYPE remains numbers even when nested
<li>one</li>
<li>two</li>
<li>three
<ol type=a>
This is an example of alphabetic counting
<li>one</li>
<li>two</li>
<li>three</li>
<li value=27>you can change the value at any point (value=27)</li>
<li>counting continues from that point</li>
<li>note that alphabetic counting can continue beyond 26.
<ol type=i>
This is an example of Roman numeral counting
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ol></li>
<li>counting resumes after each nested list is terminated</li>
</ol></li>
<li>four</li>
<li>five</li>
</ol></li>
<li>four</li>
</ol>

The reversed attribute creates a list in reversed order.

  1. This
  2. is
  3. a
  4. reversed
  5. ordered
  6. list

NOTE: in earlier versions of this tutorial a list header tag <lh> was listed. This tag was proposed for HTML 3 but never adopted; however, list headers can be inserted without tags.


Next Lesson Next Page

HTML Home