HTML:Lists

This page has been written by Cara Hughes (0615410).

Lists

In HTML you can create lists. These are a list of items, such as links. The three main types are Ordered, Unordered and Definition.

Every list must have a list item, such as a link, image or paragraphs. Lists can be nested into other lists, too.

Browsers use lists to detirmine how to render and display content on a page. All HTML is used for content, and CSS is used to control the style.

Ordered lists

An Ordered list is a list with an order such as a recipe or a step-by-step guide. The items are listed with numbers.

To create an ordered list, you need this tag:

 <OL> 

For each list item, you need this tag:

 <LI> 

An ordered list is coded like this:

 
   <OL>
     <LI> Pour ingredients into bowl </LI>
     <LI> Mix ingredients </LI>
     <LI> Bake in oven </LI>
   </OL>
 

Unordered lists

An unordered list is a list with a no specific structure, such as a list of names or a shopping list. Navigational menus use unordered lists.

The items are listed with bullet points. Unless they have been specified using CSS, most browers render or display bullet points with the default circle. With CSS you can choose what bullet point to use and even include your own image.

To create an unordered list, you need this tag:

 <UL> 

For each list item, you need this tag:

 <LI> 

An unordered list is coded like this:

 
   <UL>
     <LI> Cat </LI>
     <LI> Dog </LI>
     <LI> Fish </LI>
   </UL>
 

What is a Definition list?

A definition list is not

Coding a list

The coding stucture for lists are reasonably straight-forward. To create a list you need these tags:

 <UL> or <OL> 

If you are creating an unordered list you need to use

 <UL>  

and for an ordered list you need

 <OL> 

For each item in the list, you need:

 <LI> </LI> 

This is what an unordered list could look like:

 
   <UL>
     <LI> Keyboard </LI>
     <LI> Mouse </LI>
     <LI> Speakers </LI>
   </UL>
 

An ordered list could look like:

   <OL>
     <LI> Empty ingredients into bowl </LI>
     <LI> Mix </LI>
     <LI> Bake for 30 minutes </LI>
   </OL>
 

This section has been written by Cara Hughes (0615410).