HTML Tutorial: Lists

HTML lists lets you group a set of related items in lists. They can be ordered (like a table of contents or outline), unordered (a bullet list), or description list. Attributes include type, start and reversed.

Ordered Lists

Use when the order is important. The type of order can by changed. Options include 1, A, I (uppercase Roman numerals), a, i (lowercase Roman numerals).

  1. Introduction
  2. The Head
  3. The Body
 
<ol>
<li>Introduction</li>
<li>The Head</li>
<li>The Body</li>
</ol>
  1. Introduction
  2. The Head
  3. The Body
 
<ol type="A">
<li>Introduction</li>
<li>The Head</li>
<li>The Body</li>
</ol><

Nested Tables

Lists can be nested.

  1. Introduction
  2. The Head
  3. The Body
    1. Headings
    2. Paragrapha
    3. Images
 
<ol>
<li>Introduction</li>
<li>The Head</li>
<li>The Body</li>
 <ol type="A">
  <li>Headings</li>
  <li>Paragrapha</li>
  <li>Images</li>
 </ol>
</ol>

Changing The Start Position

  1. Apples
  2. Peaches

A paragraph to break the flow

  1. Strawberries
  2. Kiwis
 
<ol>
 <li>Apples</li>   
 <li>Peaches</li>   
</ol>
<p>A paragraph to break the flow</p>
<!-- pick up where we left off -->
<ol start="3">
 <li>Strawberries</li>   
 <li>Kiwis</li>   
</ol>

Unordered Lists

Use unordered lists when the order is not important and it will give you bullets instead if numbers and letters. The attribute type is depricated so use CSS list-style-type instead.


<style>
.disc {list-style-type:disc;} /* disc is default*/
.circle {list-style-type:circle;} 
.square {list-style-type:square;} 
.none {list-style-type:none;} 
</style>
  • Apple
  • Peach
  • Pumpkin
  • Pecan
  • Cherry
  • Chocolate
  • Blueberry
  • Lemon Meringue
<ul>
<li>Apple</li>
<li>Peach</li>
</ul>
<ul class="circle">
<li>Pumpkin</li>
<li>Pecan</li>
</ul>
<ul class="square">
<li>Cherry</li>
<li>Chocolate</li>  
</ul>
<ul class="none">
<li>Blueberry</li>
<li>Lemon Meringue</li>
</ul>

Description Lists

A definition list is a list of terms with their descriptions.
<dl> starts definition list
 <dt> Definition term of description
 </dt> End of term
 <dd> Start of description
 </dd End of description
<dl> ends definition list

Example

Mercury
Closest planet to the sun.
Venus
Second planet to the sun.Even though it is farther from the sun, its dense atmosphere make it the hottest planet in the solar system.
Earth
3rd planet from the sun. Only planet known to harbor life.
<dl>
 <dt>Mercury</dt>
 <dd>Closest planet to the sun.</dd>
 <dt>Venus</dt>
 <dd>Second planet to the sun. Even though it is farther from the sun, its dense atmosphere make it the hottest planet in the solar system.</dd>
 <dt>Earth</dt>
 <dd>3rd planet from the sun. Only planet known to harbor life.</dd>
</dl>