Webwork
/
HTML Lists

 
Because of its origins as a text-based system, HTML includes numerous ways to create lists of items:

<ul> A simple "unordered" (bulleted) list:

Source:
<ul>
   <li>this</li>
   <li>is</li>
   <li>an</li>
   <li>"unordered"</li>
   <li>list</li>
</ul>
Web Page:
  • this
  • is
  • an
  • "unordered"
  • list

<ul> An unordered list with another list nested in it:

Source:
<ul>
   <lh>List Header (optional)</1h>
   <li>this list</li>
     <ul>
       <li>contains</li>
       <li>a</li>
     </ul>
   <li>nested</li>
   <li>list</li>
</ul>
Web Page:
    List Header (optional)
  • this list
    • contains
    • a
  • nested
  • list

<ol> A simple "ordered" (numbered) list:

Source:
<ol type="1">
   <li>this</li>
   <li>is</li>
   <li>an</li>
   <li>ordered</li>
   <li>list</li>
</ol>
Web Page:
  1. this
  2. is
  3. an
  4. ordered
  5. list

<ol> Change type="1" to type="a" and the numbers change to letters:

Source:
<ol type="a">
   <li>this</li>
   <li>is</li>
   <li>an</li>
   <li>ordered</li>
   <li>list</li>
</ol>
Web Page:
  1. this
  2. is
  3. an
  4. ordered
  5. list

<ol> Insert a start point and the list begins there:

Source:
<ol type="1" start="7"></li>
   <li>this</li>
   <li>is</li>
   <li>an</li>
   <li>ordered</li>
   <li>list</li>
</ol>
Web Page:
  1. this
  2. is
  3. an
  4. ordered
  5. list

A complex list using all of above:

Source:
<ol type="a" start="1">
<lh>List Header</lh>
  <li>this</li>
  <li>is</li>
     <ol type="1" start="1">
     <li>a</li>
     <li>list</li>
       <ul type="a" start="2">
       <li type="circle">within</li>
       <li type="square">a</li>
       </ul>
     <li>list</li>
     <li>within</li>
     </ol>
  <li>a</li>
  <li>list</li>
</ol>
Web Page:
    List Header
  1. this
  2. is
    1. a
    2. list
      • within
      • a
    3. list
    4. within
  3. a
  4. list

<dl> Definition list - a special list for words or phrases followed by their definitions:

Source:
<dl>
   <dt>Ennui</dt>
      <dd>feeling of utter weariness and discontent resulting from satiety or lack of interest</dd>
   <dt>Malcontent</dt>
      <dd>a person who is chronically discontented or dissatisfied</dd>
   <dt>Meme</dt>
      <dd>a cultural item that is transmitted by repetition in a manner analogous to biological transmission</dd>
</dl>
Web Page:
Ennui
a feeling of utter weariness and discontent resulting from satiety or lack of interest
Malcontent
a person who is chronically discontented or dissatisfied
Meme
a cultural item that is transmitted by repetition in a manner analogous to biological transmission

<dl> Navigation - using a list to create a navigation bar

A simple unordered list of links without styling:

Source:
<ul>
<li><a href="page01.html">PAGE 1</a></li>
<li><a href="page02.html">PAGE 2</a></li>
<li><a href="page03.html">PAGE 3</a></li>
<li><a href="page04.html">PAGE 4</a></li>
</ul>
Web page:

The same list of links with styling:

Source:
<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
padding: 0 7px 0 0;
}

a {
display: block;
text-align: center;
background-color: #eee;
padding: 5px 10px 5px 10px;
font: bold 11px/14px 'trebuchet ms', sans-serif;
text-decoration: none;
color: #800;
}

a:hover {
background-color: #800;
color: #fff;
}
</style>

<ul>
<li><a href="page01.html">PAGE 1</a></li>
<li><a href="page02.html">PAGE 2</a></li>
<li><a href="page03.html">PAGE 3</a></li>
<li><a href="page04.html">PAGE 4</a></li>
</ul>
Web page:
Previous | Webwork Table of Contents | Next >