Re-vision - Photography and Graphics by J. Boersma - Webwork HTML Tutorial

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:

this
is
an
ordered
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:

this
is
an
ordered
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:

this
is
an
ordered
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

this
is

a
list

within
a

list
within

a
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:

Web page:

The same list of links with styling:

Source:

Web page: