Using Lists
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 />
<h3>This is my very first web page.</h3>
<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 />
<h3>This is my very first web page.</h3>
<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 />
<h3>This is my very first web page.</h3>
<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>