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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma