An Introduction to Lists

Unordered Lists

Making Lists in HTML is as simple as using two basic elements, the <ul> tag (which declares the list) and <li> tag (which declares each line item).  This creates what is called an unordered list, which is displayed below.

A Normal Bulleted List

  • Bananas
  • Oranges
  • Apples
 <h2>A Normal Bulleted List</h2>
<ul>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
</ul> 

It is easy to change the type of bullet used in an unordered list using the type attribute.

Different List Types

  • Circle
  • Square
  • Disc
 <h2>Different List Types</h2>
<ul>
  <li type="circle">Circle</li>
  <li type="square">Square</li>
  <li type="disc">Disc</li>
</ul> 

Ordered Lists

Ordered lists simply arrange the items in your list numerically.  They are called with the <ol> tag while each list item is declared with the <li> tag.

A Simple Ordered List

  1. One
  2. Two
  3. Three
 <h2>A Simple Ordered List</h2>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol> 

Ordered lists also take the type attribute, which controls the type of numerical placeholder used.  The sequential value can also be changed easily by using the value attribute.

Types of Ordered Lists

  1. 1 (Arabic numbers)
  2. a (lowercase alphanumeric)
  3. A (uppercase alphanumeric)
  4. i (lowercase Roman numbers)
  5. I (uppercase Roman numbers)
  6. You can also reset the value using the value attribute.
  7.  Value is now 16.
 <h2>Types of Ordered Lists</h2>
<ol>
  <li type="1">1 (Arabic numbers)</li>
  <li type="a">a (lowercase alphanumeric)</li>
  <li type="A">A (uppercase alphanumeric)</li>
  <li type="i">i (lowercase Roman numbers)</li>
  <li type="I">I (uppercase Roman numbers)</li>
  <li type="1" value="15">Value is 15</li>
  <li>Value is now 16.</li>
</ol>

You can also change the entire sequencing of numbers in an ordered list by using the start attribute.

Changing the Starting Point

  1. You can also start a new list and set the starting value using the start attribute.
  2. Impressive, isn't it?
 <h2>Changing the Starting Point</h2>
<ol type="1" start="105">
  <li>Starting value is 105</li>
  <li>Impressive, isn't it?</li>
</ol>

Nesting Lists

One of the nicer aspects about lists in HTML is that it allows you to nest one list inside another to create a sub list. The default appearance of the sub lists will vary from the main list with the first sub list using circle bullets and the next nested list using squares.

Favorite States and Cities

  • Massachusetts
    • Boston
      • South Boston
      • Back Bay
    • Wellesley
    • Lynn
  • Georgia
    • Atlanta
    • Forest Park
 <h2>Favorite States and Cities</h1>
<ul>
  <li>Massachusetts</li>
    <ul>
       <li>Boston</li>
          <ul>
             <li>South Boston</li>
             <li>Back Bay</li>
          </ul>
       <li>Wellesley</li>
       <li>Lynn</li>
    </ul>
  <li>Georgis</li>
     <ul>
        <li>Atlanta</li>
        <li>Forest Park</li>
    </ul>
</ul>

Definition Lists

This is the Defined Term
This is the definition of the defined term
Second Defined Term
This is the second definition
 <h2>Definition Lists</h2>
<dl>
 <dt>This is the Defined Term</dt>
  <dd>This is the definition of the defined term</dd>
 <dt>Second Defined Term</dt>
  <dd>This is the second definition</dd>
</dl> 

Back to the Examples Page