HTML:Lists

Main Page >> Website fundamentals >> Workbook >> HTML >> xxx

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

Lists

In HTML you can create lists. 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 a list of items. As the name suggests, they define or explain an item in a list.

Each item in the list is called a Term, and each description or explaination is called a Definition, like in a dictionary.Like in the other lists, you can use paragraphs, links or images for each item.

To start a definition list, you need the following tag:

 <DL> 

For each term in the list, you need this tag:

 <DT> 

And for the definition for each term, you need this tag:

 <DD> 

An example of code for a definition list is:

 
   <DL>
     <DT> HTML </DT>
       <DD> Hypertext Markup Language </DD>
     <DT> CSS </DT>
       <DD> Cascading Style Sheets </DD>
   </DL>
 

Attributes and Values

You can use these attributes in a list:

 type 

This attribute lets you choose the style of the bullet points. The values are disc, circle, square, 1, A, a, I, i . For an ordered list, you can only choose numbers.

 start 

In an ordered list, this attribute lets you specify what number to start counting from.

Practising with lists

I found that practising writing shopping and to-do lists in HTML code helped me remember. When you can do them, try styling them with CSS. It's amazing what you can do!