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