Lists
Lists are a very useful way to organize information. There are three
kinds of lists:
- Unordered lists
- Ordered lists
- Definition lists
Definition lists are created a bit differently and so will be dealt with
last.
Unordered Lists
An unordered list looks like this:
- First item
- Second item
- Third item
Note that each item is indented and has a bullet in front of it.
Unordered lists are easy to create. First, you create the list with the
<ul> tag. At the end of the list you close it with </ul>.
Each item in the list begins with a <li> tag. Like the paragraph
tag, you don't have to close the <li>, it is understood that when
you start a new item that the last one has ended.
So to create the above list the code would look like:
<ul>
<li>First item
<li>Second item
<li>Third item
</ul>
You don't have to put each item on a second line in the html but it helps
make the html easier to read. Also, you don't have to indent each item
but again, it helps you see what is part of the list and what isn't.
You can also create nested lists. All you do is just put a <ul>
within the list. A nested list looks like this:
- First item
- Second item
- First sub-item
- Second sub-item
- Third sub-item
- Third item
Note that the bullet in front of each item changes in the sub-section.
The code for this list would look like this:
<ul>
<li>First item
<li>Second item
<ul>
<li>First sub-item
<li>Second sub-item
<li>Third sub-item
</ul>
<li>Third item
</ul>
Remember to close the nested list before continuing with the first level
of the list, otherwise you can get strange results. Also, note how the
sub-items are indented a second time so that you can tell which items are
really sub-items, you don't have to do this but it is recommended.
Ordered Lists
Ordered lists look like this:
- First item
- Second item
- Third item
Note that instead of a bullet in front of each item there is a number.
Ordered lists are created almost the same way as unordered lists. The
only difference is that you use <ol> and </ol> to create the
list instead of <ul> and </ul>. So the html for the above
list would be:
<ol>
<li>First item
<li>Second item
<li>Third item
</ol>
Just like unordered lists, you can nest ordered lists:
- First item
- Second item
- First sub-item
- Second sub-item
- Third sub-item
- Third item
This is not recommended though as it can get confusing. If you refer to
item 3 for instance, which item 3 do you mean?
A better way to nest items within an ordered list is to use an unordered
list:
- First item
- Second item
- First sub-item
- Second sub-item
- Third sub-item
- Third item
The html for this list would look like this:
<ol>
<li>First item
<li>Second item
<ul>
<li>First sub-item
<li>Second sub-item
<li>Third sub-item
</ul>
<li>Third item
</ol>
Ordered lists should also be avoided if you want to have links in the
table, as you will then have numbers for the table and numbers for the
links, and they might not be the same. Instead, you should use unordered
lists.
Definition Lists
Definition lists are slightly more complicated then unordered and ordered
lists.
A definition list looks like this:
- First term
- First Definition
- Second term
- Second Definition
- Third term
- Third Definition
Notice that a definition list, unlike unordered and ordered lists, has
two items, a term and then a definition. This is why the html for
definition lists is somewhat different from other lists. The html for the
above list would look like:
<dl>
<dt>First term
<dd>First Definition
<dt>Second term
<dd>Second Definition
<dt>Third term
<dd>Third Definition
</dl>
Notice that the list is created with the
<dl> </dl> tag. Also notice that each term starts with a
<dt>. Each definition starts with a <dd>.
Don't feel that you can only use the definition list for defining terms
though, it is only called that because that is what the list looks like.
Definition lists can be very useful in other circumstances as well. Such
as a to-do list:
- Monday
-
- Get up
- Eat breakfast
- Go to work
- Work on project 1
- Call the boss
- Lunch with Client
- Go home
- Tuesday
- Get up
- Eat breakfast
- Take kids to school
- Work at home
This list is a bit more complicated as it uses all 3 types of lists, but
it is not hard to create:
<dl>
<dt>Monday
<dd>
<ol>
<li>Get up
<li>Eat breakfast
<li>Go to work
<ul>
<li>Work on project 1
<li>Call the boss
<li>Lunch with Client
</ul>
<li>Go home
</ol>
<dt>Tuesday
<ol>
<li>Get up
<li>Eat breakfast
<li>Take kids to school
<li>Work at home
</ol>
</dl>
In this example you can see why indenting list items is so important to
keeping track of what's going on. You don't have to start a new line for
each list item, or indent each of the items but then the html becomes
almost unreadable:
<dl><dt>Monday<dd><ol><li>Get
up<li>Eat breakfast<li>Go to work<ul><li>Work on
project 1<li>Call the boss<li>Lunch with Client</ul><
li>Go home</ol><dt>Tuesday<ol><li>Get up<li>
Eat breakfast<li>Take kids to school<li>Work at home</ol>
</dl>
This is the exact same html as before but just by not starting new lines,
or indenting the work, the html has become nearly impossible to follow.
Even if you can read html quite well, you would have problems with this.
If you ever work with someone else on a project, it is especially
important to make sure that the html is easy to read. This is what is
known as "clean html", the easier the html is to follow the "cleaner" it is.