fbe University of New South Wales Sydney Australia UNSW
Faculty of the Built Environment search
HTML Reference
Lists

HTML provides three list types: ordered, unordered and discursive. You can nest lists inside lists (either of the same type or of different types).
Ordered Lists
Ordered lists are numbered, starting from 1, each "point" is placed on a new line, but without extra space between it and the next point.

An ordered list starts with the <ol> tag. Each point starts with the <li> tag and should end with the </li> tag, but most people leave the end tag off!

Note that you can include paragraph tags (<p>) to increase the spacing between particular points, as shown in the example below:
Syntax HTML Text
<ol>
<li> ... </li>
<li> ... </li>
...
</ol>		 <ol>
<li>This is the First Point of a number of points</li>
<li>Second Point
<p></li>
<li>Third Point</li>
<li>Fourth Point</li>
</ol>
  1. This is the First Point of a number of points
  2. Second Point

  3. Third Point
  4. Fourth Point
HTML provides three list types: ordered, unordered and discursive. You can nest lists inside lists (either of the same type or of different types).
Ordered Lists - Netscape Extensions
In addition to numeric numbering of list items, Ordered lists have been revamped to allow various kinds of list numbering.
<ol type=A|a|I|i|1>
In addition to the type of "numbering", you can also set the start value. This is done by specifying the numeric value of the starting item; so if the type=A, and you want the list to start at J, then specify start=10.
<ol start=KK> where KK is the numeric value of the start.
The type of the "numbering" can be specified with the <li> tag itself! The start attribute is not used (unfortunately!), instead the value attribute is used to set the value of the current list item (and restart the "count").
<li type=A|a|I|i|1>
<li value=KK>		 where KK is the numeric value of the start.
Unordered Lists
Unordered lists have basically the same syntax as ordered lists, except that the <ul>.....</ul> tags replace the <ol>.....</ol> tags! The result is a list with bullets instead of numbers.
Syntax HTML Text
<ul>
<li> ... </li>
<li> ... </li>
...
</ul>		 <ul>
<li>This is the First Point of a number of points</li>
<li>Second Point
<p></li>
<li>Third Point</li>
<li>Fourth Point</li>
</ul>
  • This is the First Point of a number of points
  • Second Point

  • Third Point
  • Fourth Point
Unordered Lists - Netscape Extensions
Unordered Lists, have been extended to allow the type of bullet to be specified.
<ul type=disc|circle|square>
Note that on many browsers disc and circle appear the same.

You can also specify the bullet type with the <li> tag itself!
<li type=disc|circle|square>
It may not surprise you to know that you can, in fact, use the <li> tag outside of a list! It is similar to when used inside an unordered list, except that the paragraph is not indented and nor are the lines following the first indented in from the point.
Syntax HTML Text
<li> ... </li>
<li> ... </li>
...		 <li>This is the First Point of a number of points</li>
<li>Second Point
<p></li>
<li>Third Point</li>
<li>Fourth Point</li>
  • This is the First Point of a number of points
  • Second Point

  • Third Point
  • Fourth Point
    •
    Indented Paragraphs
    One non-standard use of the <ul> tag, is to produce indented paragraphs. For every <ul> tag, the text is indented further. Be aware that while this is supported (by Netscape) at present, it may not be supported by all browsers or by any browsers in the future.

    A better solution would be to use a Table...
    Syntax HTML Text 
    <ul> ...
    <ul> ...
         ...
    </ul>
</ul>
    		 <ul>This text is indented
    <ul>Indented further
    <p>
    This text is still indented
    </ul>Back out one level!
    </ul>
      This text is indented
        Indented further

        This text is still indented

      Back out one level!
    Discursive Lists
    Discursive lists are more complicated than either of the other lists, because each "point" has a "term" (enclosed in <dt>...</dt>) and a "definition" (enclosed in <dd>...</dd>). Each point should include only one <dt>...</dt> & <dd>...</dd> pair.

    Note that, as with the other list types, the end </dt> and </dd> tags can be left off, but the end list tag </dl> must NOT be ignored.
    Syntax HTML Text
    <dl>
    <dt> ... </dt>
    <dd> ... </dd>

    <dt> ... </dt>
    <dd> ... </dd>

    ...
    </dl>    		 <dl>
    <dt>First Point</dt>
    <dd>This is the text associated with the first point.</dd>
    <dt>Second Point</dt>
    <dd>2nd point text
    <p></dd>
    <dt>Third Point</dt>
    <dd>This is the text associated with the third point.</dd>
    </dl>
    First Point
    This is the text associated with the first point.
    Second Point
    2nd point text

    Third Point
    This is the text associated with the third point.


    Go to next section: Tables or return to the Contents page.
    Last Updated: 19 August 1999