Guide to HTML
Creating Lists

Ordered list | Unordered list | Directory list | Menu list | Definition list | List item | List header

Ordered List

Syntax:

<ol [type="value"] [start="value"]>...</ol>

Use this type of list if you want the items in the list to be sequentially numbered. Each item in the list is to be preceded with the code <li>. The attributes are both optional.

The type attribute specifies the way the list items are numbered. There are five possible values:

  1. 1
  2. a
  3. A
  4. i
  5. I

The example table shows the source code and the result for each of the possible values.

Source code Type="1" Type="a" Type="A" Type="i" Type="I"
<ol type="...">          
<li>First. 1. First. a. First. A. First.   i. First.   I. First.
<li>Second. 2. Second.b. Second.B. Second. ii. Second.  II. Second.
<li>Third. 3. Third. c. Third. C. Third. iii. Third. III. Third.
</ol>          

Note:

Example:

Source:

<ol type="A" start="3">
<li>First item.
<li>Second item.
<li>Third item.
</ol>

Result:

  1. First item.
  2. Second item.
  3. Third item.

You can also create a list with mixed numbering styles:

Example:

Source:

<ol type="1">
<li>First item
<li>Second item
  <ol type="a">
  <li>First sub-item
  <li>Second sub-item
  </ol>
<li>Third item
</ol>

  1. First item
  2. Second item
    1. First sub-item
    2. Second sub-item
  3. Third item

Note:

Top


Unordered List

Syntax:

<ul [type="value]"> [<lh>list header</lh>] ...</ul>

In an unordered list the items are preceded by dots, circles, or squares, depending on the level or the type attribute.

You can create a list in another list. In fact, there are three levels of nested lists possible. Depending on the level, the symbol preceding the list item will be a dot, a circle or a square. Take a look at the example.

Example:

Source:

<ul>
<li>First level, first item.
  <ul>
  <li>Second level, first item.
  <li>Second level, second item.
    <ul>
    <li>Third level, first item.
    <li>Third level, second item.
    <li>Third level, third item.
    </ul>
  <li>Second level, third item.
  </ul>
<li>First level, second item.
<li>First level, third item.
</ul>

Result:

You can also force the browser to use a certain type of symbol with the type attribute. The three possible values are: disc, circle, or square. If you decide to override the default type, you should be aware that you only override the symbol used in the list level you specified the type for. All following levels will use their default type.

You can also create a mixed ordered/unordered list:

Example:

Source:

<ol>
<li>First item
<li>Second item
  <ul>
  <li>First sub-item
  <li>Second sub-item
  </ul>
<li>Third item
</ol>

Result:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

For clearness, you should try to avoid more than three subsequent levels in the same list. If you use more than three nested levels, your browser will use the symbol type for the highest list level for all levels above the third, which is by default the square.

Note:

Don't: It is considered bad style to create a numbered or ordered list, using the codes for an unordered list. The following example is incorrect and should be avoided:

   <ul>
   1. ...
   2. ...
   3. ...
   </ul>

Instead, use the ordered list and the <li> code in front of each of the list items instead:

   <ul type=1>
   <li> ...
   <li> ...
   <li> ...
   </ul>

Don't: Do not use headers inside lists. Instead, use the appropriate font codes to change the font size, together with style codes such as <b>...</b>

Top


Directory List

Syntax:

<dir>...</dir>

This element was originally designed to be used for creating multi-column directory lists (see the menu list). The directory type of list is the same as any unordered list. For more information, read the section about unordered lists.

Some browsers will attempt to optimize the column width as function of the widths of individual elements.

Top


Menu List

Syntax:

<menu>...</menu>

This element was originally designed to be used for single column menu lists (see the directory list). Typically, a menu list will be rendered as a bulleted list, but this is at the discretion of the browser. For more information, read the section about unordered lists.

Top


Definition List

Syntax:

<dl [compact]><dt>...[</dt>]<dd>...[</dd>]</dl>

This type of list is suited for composing a list of terms which are preceded by a word or a sentence. Just take a look at the example.

Example:

Source:

<dl>
<dt>admire
<dd>appreciate, approve, esteem, praise, respect, venerate
<dt>admissible
<dd>acceptable, allowable, justifiable, permissible, tolerable, suitable, warranted
<dt>admit
<dd>accept, acknowledge, agree, allow, assent, concede, confess, grant, open, sanction
</dl>

Result:

admire
appreciate, approve, esteem, praise, respect, venerate
admissible
acceptable, allowable, justifiable, permissible, tolerable, suitable, warranted
admit
accept, acknowledge, agree, allow, assent, concede, confess, grant, open, sanction

The codes <dl> and </dl> denote the beginning and ending of the definition list. Each of the definition terms is preceded by the code <dt> and the definition data is preceded by the code <dd>.

It is not required to use the definition data code <dd>, it is optional. The closing tags </dt> and </dd> are both optional.

Using a <dd> element without the corresponding <dt> element will also work in most browsers, but this practice is highly discouraged. Instead, use an empty <dt> element followed by the <dd> element.

The <dt> elements can only contain text level elements (such as <font>, <basefont>, <anchors>, <img>, <br>), while <dd> elements can hold block level elements as well (such as <p>, <ul>, <ol>, <dl>, <pre>, <div>, <center>, <blockquote>, <hr>, <table>), excluding headings and address elements.

Example:

Source:

<dl>
<dt>admire
<dd>appreciate, approve, esteem, praise, respect, venerate
<dt>admissible
<dd>acceptable, allowable, justifiable, permissible, tolerable, suitable, warranted
<dt>
<dd>(see page SA-1 for more information)
<dt>admit
<dd>accept, acknowledge, agree, allow, assent, concede, confess, grant, open, sanction
</dl>

Result:

admire
appreciate, approve, esteem, praise, respect, venerate
admissible
acceptable, allowable, justifiable, permissible, tolerable, suitable, warranted
(see page SA-1 for more information)
admit
accept, acknowledge, agree, allow, assent, concede, confess, grant, open, sanction

The attribute compact is somewhat tricky. In the above two examples, the definition data is written on the line following the definition term. That is not because the definition data is written on a separate line in the source code. You can write the definition term and definition data on the same line (i.e. immediately following the <dd> line), they will still be displayed on a separate line by your browser.

With some browsers, there is a way to prevent this from happening and to force the browser to write the definition data on the same line after the definition term. You can do this by using the compact attribute. Take a look at the example.

Example:

Source:

<dl compact>
<dt>1996
<dd>Graduation.
<dt>1997
<dd>A course.
<dt>1998
<dd>Another course.
<dt>1999
<dd>Graduated again.
<dt>2000
<dd>Who knows what the future brings.
</dl>

Result:

1996
Graduation.
1997
A course.
1998
Another course
1999
Graduated again.
2000
Who knows what the future brings.

The definition data will be left justified, which looks neat.

There is a drawback... Your definition term cannot exceed a certain number of characters, which is a fixed limit, depending on the current font size. For small numbers or words this will do.

Note:

Top


List Item

Syntax:

<li [type="value"] [value="value"]>...[</li>]

It is possible to use a <li> list item without defining a list first. However, this is not guaranteed to work as browsers are free to ignore these kind of out-of-context items.

By default, the "disc" type (the small dot) will be used. With some browsers it is possible to override the default type and specify another type by the type="disc|square|circle" attribute.

You can set the value for the specific list item to override the sequence number as calculated by the browser.

Example:

Source:

<ol>
<li>First item
<li>Second item
<li value="7">Third item
<li>Fourth item
</ol>

Result:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Note:

Top


List Header

Inside a list definition you can specify a header (title) for the table.

Syntax:

<lh>List title here</lh>

Source:

<ol>
  <lh>List title</lh>
  <li>First item
  <li>Second item
  <li>Third item
</ol>

Result:

    List title
  1. First item
  2. Second item
  3. Third item

Note:



Paragraph separator