Help       |       Contact Us      

Back To Chebucto Community Net Homepage


Chebucto Community Net

Lists
Home >> HelpDesk >> HTML: The Language of the Internet >> Lists

Serving Your Community's Online Needs Since 1994.

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:

  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:


   <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.

Use Chebucto's
Secure Webmail!

Chebucto Username

Mail Password

Set Spam Filter Preferences


Join Here!
Get your own Chebucto account

Chebucto Services
Look here for our available services and prices!
Accounts for individuals, families, non-profit groups and small businesses!

Secure Online Payment
for Donations/
Membership Renewals
[PayPal]  

About Us      Help promote us!
Who we are, what we do
and how you can help

Chebucto Plus
Our Premium Internet Access

Chebucto Wireless
Our Community-Run
Non-Profit Highspeed Access

 

The Chebucto
Neighbourhood

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

By Alphabet      By Subject

Chebucto Photo Gallery


Chebucto Community Net
Our Privacy Policy                Our Web Site Terms of Use