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:

1. First item
2. Second item
3. 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:

1. First item
2. Second item
   1. First sub-item
   2. Second sub-item
   3. Third sub-item
3. 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:

1. First item
2. Second item
   • First sub-item
   • Second sub-item
   • Third sub-item
3. 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

1. Get up
2. Eat breakfast
3. Go to work
   • Work on project 1
   • Call the boss
   • Lunch with Client
4. Go home

Tuesday

1. Get up
2. Eat breakfast
3. Take kids to school
4. 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:

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.

The Chebucto
Neighbourhood
Websites of Dozens of Groups, Organizations and Businesses hosted by Chebucto

By Alphabet      By Subject

Chebucto Photo Gallery