Using Lists
"Imagine if every Thursday your shoes exploded if you tied them the usual way. This happens to us all the time with computers, and nobody thinks of complaining." (Jeff Raskin)
There are three types of list formats:
- ordered (eg. numbered lists)
- unordered (bulletted lists)
- definition lists.
All lists are BLOCK ELEMENTS which means that you do not have to nest them inside tags pairs such as <p></p>.
Unordered Lists
An unordered list starts with the <ul> tag and ends with the </ul> tag.
Each list item starts with the <li> tag and ends with the </li> tag.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Add this to your example web page like so:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
The line break before and after the list isn't actually required - it just makes the markup easier to read!
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers or letters.
An ordered list starts with the <ol> tag and ends with the </ol> tag.
Each list item starts with the <li> tag and ends with the </li> tag.
For example:
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
Add this to your example web page like so:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
</body>
</html>
Definition Lists
A definition list is a list of terms and explanation of those terms - rather like definitions in a dictionary.
A definition list starts with the <dl> tag and ends with the </dl> tag.
Each definition term starts with the <dt> tag and ends with the </dt> tag.
Each explanation starts with the <dd> tag and ends with the </dd> tag.
For example:
<dl>
<dt>Unordered List</dt>
<dd>A bulleted, list</dd>
<dt>Ordered List</dt>
<dd>A list with numbers or letters for each
item</dd>
<dt>Definition List</dt>
<dd>list of terms and explanations - like this
list!</dd>
</dl>
Add this to your example web page like so:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page!</h1>
<hr />
<h2>This is my very first web page.</h2>
<p>Not bad for a first attempt.<br />
I can also introduce line breaks</p>
<p><strong>This is bold
text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
<hr />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<dl>
<dt>Unordered List</dt>
<dd>A bulleted, list</dd>
<dt>Ordered List</dt>
<dd>A list with numbers or letters for each
item</dd>
<dt>Definition List</dt>
<dd>list of terms and explanations - like this
list!</dd>
</dl>
</body>
</html>