Home Logo
Show Full Menu
Hide Full Menu
 

Understanding lists

Created: 16/09/10 Views: 1328 myFave Image

In this tutorial we will learn how to create 3 types of lists in our web page.
Using lists is a nice little way to layout simple data. The 3 HTML list types are unordered, ordered and definition, they all work the same way but each has a slight difference.

We will start with the unordered list.
The unordered list uses 2 tags, these are <ul></ul> and <li></li>
Here is an example of an unordered list [coding]
  • <ul><b>My List</b>
  • <li>Cheese</li>
  • <li>Butter</li>
  • <li>Milk</li>
  • <li>Bread</li>
  • </ul>

Here is an example of an unordered list
    My List
  • Cheese
  • Butter
  • Milk
  • Bread


Next we will learn the ordered list.
The ordered list uses 2 tags, these are <ol></ol> and <li></li>
Here is an example of an ordered list [coding]
  • <ol><b>My Ordered List</b>
  • <li>Cheese</li>
  • <li>Butter</li>
  • <li>Milk</li>
  • <li>Bread</li>
  • </ol>

Here is an example of an ordered list
    My Ordered List
  1. Cheese
  2. Butter
  3. Milk
  4. Bread


Finally we will learn the definition list.
The ordered list uses 3 tags, these are <dl></dl>, <dt></dt> and <dd></dd>
Here is an example of a definition list [coding]
  • <dl><b>My Def. List</b>
  • <dt>Cheese</dt>
  • <dd>- cheddar</dd>
  • <dt>Butter</dt>
  • <dd>- low fat</dd>
  • <dt>Milk</dt>
  • <dd>- semi-skimmed</dd>
  • <dt>Bread</dt>
  • <dd>- white</dd>
  • </dl>

Here is an example of an ordered list
My Def. List
Cheese
- cheddar
Butter
- low fat
Milk
- semi-skimmed
Bread
- white


Now you have learnt these 3 list types, you can experiment yourself using the style attribute, by changing the margins and padding you can create a preferred list. There is also specific list styles, list-style-type for example allows you to change the marker from pre-made markers or to your own custom image marker.


next tutorial: Using 'correct' methods to layout your website

There are no comments