Definition lists are created a bit differently and so will be dealt with last.
An unordered list looks like this:
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:
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 look like this:
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:
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:
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 are slightly more complicated then unordered and ordered lists.
A definition list looks like this:
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:
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.