Block-Level Elements
No, you read the heading right the first time. There are still quite a few block-level elements to go: in fact we'll be giving you three bloody pages of them to be getting on with.
Lists
Lists are increasingly useful things these days. You'll see a list in some form or other on every single page on this site. They may have been changed drastically in appearance thanks to judicious use of CSS, but they're there. You should learn how to use them. Lists mean better organisation of data. Lists are your friends.
There are three types of list in HTML: unordered lists, ordered lists and definition lists.
Unordered Lists
If you use Word, Powerpoint or any other word processor or presentation software, chances are you may have a passing familiarity with unordered lists. They're also known as bulletted lists, and are, well, just that. Lists of bullet points. They use just two tags: <ul> and <li>. UL is short for 'Unordered List' and LI stands for 'List Item'. Here's an unordered list in action.
- This is an unordered list item!
- So is this!
- As indeed is this!
And here's the code!
<ul>
<li>This is an unordered list item!</li>
<li>So is this!</li>
<li>As indeed is this!</li>
</ul>
Ordered Lists
But what if you want to put down a numbered list of items? It's just as easy to do as an unordered list. You just need two tags: <ol> and <li>. OL stands for 'Ordered List'. We've just met <li>.
- Yay!
- Woo!
- Houpla!
As for the code:
<ol>
<li>Yay!</li>
<li>Woo!</li>
<li>Houpla!</li>
</ol>
Nesting Ordered or Unordered Lists
Sometimes you may wish to make a more complex list with different categories and subcategories. Luckily HTML is flexible enough to allow this. You can actually nest lists inside <li> tags.
- For example,
- Here's an unordered list
- With another
- Unordered list
- Nested inside it.
- How about that?
And if you want to see the code for that, here it is:
<ul>
<li>For example,</li>
<li>Here's an unordered list
<ul>
<li>With another</li>
<li>Unordered list</li>
<li>Nested inside it.</li>
</ul>
<li>
<li>How about that?</li>
</ul>
Definition Lists
Definition lists work a little differently. Rather than a simple list of items, it's a list of terms and definitions of those terms. Definition lists contain three pairs of tags: <dl>, <dt> and <dd>. These tags stand for 'Definition List', 'Definition Title' and 'Definition Description' respectively. Try this code out and you'll get the general idea.
<dl>
<dt>Cat</dt>
<dd>Fuzzy animal that goes 'miaow!' and coughs up hairballs.</dd>
<dt>Dog</dt>
<dd>Fuzzy animal that goes 'woof!' and humps people's legs.</dd>
</dl>