Olin & Uris Libraries

Printer-friendly version

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>

• item number 1
• item number 2
• item number 3

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
2. 1. Second Level
   2. Second Level, item B
   3. 1. Third Level
      2. Third Level, item 2
      3. 1. Fourth Level
         2. Fourth Level, item b
      4. Third Level, item 3
3. First Level, item II
4. 1. Second Level
      1. Third Level
      2. Third Level, item 2
   2. Second Level, item B
      1. Third Level
      2. 1. Fourth Level
         2. Fourth Level, item b
      3. Third Level, item 2
   3. Second Level, item C
      1. Third Level
      2. Third Level, item 2
   4. Second Level, item D
5. 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>

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