HTML Lists


HTML allows you to create several types of lists:

Unnumbered lists:

<ul>
<li>item number 1 </li>
<li>item number 2 </li>
<li>item number 3 </li>
</ul>


Ordered lists:

<ol>
<li>item number 1 </li>
<li>item number 2 </li>
<li>item number 3 </li>
</ol>

  1. item number 1
  2. item number 2
  3. item number 3

Ordered lists may display Roman numerals, upper-case letters, and lower-case letters.

<ol type="I"> (creates an ordered list with Roman numerals)
<ol type="A"> (creates an ordered list with upper-case letters)
<ol type="a"> (creates an ordered list with lower-case letters)


Lists may also be nested. The example below illustrates four types of ordered lists nested together to create an outline format.

<ol type="I">
<li>item number 1 </li>
<ol type="A">
<li>item number 2 </li>
<ol>
<li>item number 3 </li>
<ol type="a">
<li>item number 4 </li>
</ol></ol></ol></ol>

  1. item number 1
    1. item number 2
      1. item number 3
        1. item number 4

 

A more detailed nested list:

  1. First Level
    1. Second Level
    2. Second Level, item B
      1. Third Level
      2. Third Level, item 2
        1. Fourth Level
        2. Fourth Level, item b
      3. Third Level, item 3
  2. First Level, item II
    1. Second Level
      1. Third Level
      2. Third Level, item 2
    2. Second Level, item B
      1. Third Level
        1. Fourth Level
        2. Fourth Level, item b
      2. Third Level, item 2
    3. Second Level, item C
      1. Third Level
      2. Third Level, item 2
    4. Second Level, item D
  3. And so on....

Here is the code for the nested list above:

<ol type="I">
<li>First Level</li>
<ol type="A">
<li>Second Level</li>
<li>Second Level, item B</li>
<ol type="1">
<li>Third Level</li>
<li>Third Level, item 2</li>
<ol type="a">
<li>Fourth Level</li>
<li>Fourth Level, item b </li>
</ol>
<li>Third Level, item 3</li>
</ol>
</ol>

<li>First Level, item II</li>
<ol type="A">
<li>Second Level
<ol>
<li>Third Level</li>
<li>Third Level, item 2</li>
</ol>
</li>
<li>Second Level, item B
<ol>
<li>Third Level</li>
<ol type="a">
<li>Fourth Level</li>
<li>Fourth Level, item b</li>
</ol>
<li>Thid Level, item 2</li>
</ol>
</li>
<li>Second Level, item C
<ol>
<li>Third Level</li>
<li>Third Level, item 2</li>
</ol>
</li>
<li>Second Level, item D</li>
</ol>

<li>....and so on.</li>
</ol>


Directory lists: Useful to indent list items. Note that you must add the <br /> tag at the end of each line in this example.

<dir>
item number 1 <br />
item number 2 <br />
item number 3 <br />
</dir>

item number 1
item number 2
item number 3


Dictionary lists: Useful for glossary and vocabulary lists and also for bibliographic citations.

<dl>
<dt>Dictionary term 1 </dt>
<dd>Dictionary definition 1; this section can be quite long and each line will be indented like the first line. </dd>
<dt>Dictionary term 2 </dt>
<dd>Dictionary definition 2 </dd>
</dl>

Dictionary term 1
Dictionary definition 1; this section can be quite long and each line will be indented like the first line.
Dictionary term 2
Dictionary definition 2

Return to the HTML I class outline


Last updated January 13, 2005 (lh & im)
Olin & Uris Libraries
IRIS: Instruction, Research & Information Services
Tony Cosgrave (ajc5)
URL: http://www.library.cornell.edu/olinuris/ref/ws/html/lists.htm