Lists

There are many types of lists that can be used when writing code, but all are very simple and easy to use. They allow data to be shown in list form which can either be numbered or just bullet-pointed.


List Items

When writing a list each piece of information that is entered is called data. Each piece of data will be a new list item, meaning that it will be on a new line and indented with either a number or bullet point before it.

The tags for this are: <li>...</li>

Where the data goes between the two tags. When writing a list these tags must go between the tags of the type of list that has been chosen.


Unordered Lists

This type of list is 'unordered' meaning that the data can be entered in any order and still make sense. The data is then displayed with bullet points. Each list item must be inside the <li>...</li> tags.

The tags for this are: <ul>...</ul>

These tags go at the beginning and end of the complete list. For example:

<ul>
<li>English</li>
<li>French</li>
<li>German</li>
</ul>

This would be represented as:

  • English
  • French
  • German

Ordered Lists

This type of list is 'ordered' meaning that the data is entered in an order and is then displayed as a numbered list rather than just with bullet points. Each list item must still be inside the <li>...</li> tags.

The tags for this are: <ol>...</ol>

These tags go at the beginning and end of the complete list. For example:

<ol>
<li>Go for a run</li>
<li>Eat breakfast</li>
<li>Go to work</li>
</ol>

This would be represented as:

  1. Go for a run
  2. Eat breakfast
  3. Go to work

Definition Lists

This list is slightly different from the previous two as it does not require the <li>...</li> tags, but instead uses two sets of tags. As this is a list for definitions the first set of tags used displays the word to be defined, which are <dt>...</dt>. Then the actual definition of the word is encased in <dd>...</dd>.

The main tags for this list are: <dl>...</dl>

These tags go at the beginning and end of the complete list. For example:

	<dl>
		<dt>Bus</dt>
			<dd>A bus is a large vehicle that only goes to certain 
			destinations and you have to pay to travel on them.</dd>
		<dt>Plane</dt>
			<dd>A plane is a vehicle with wings and one or more engines, which can fly.</dd>
	</dl>

This would be represented as:

Bus
A bus is a large vehicle that only goes to certain destinations and you have to pay to travel on them.
Plane
A plane is a vehicle with wings and one or more engines, which can fly.

Also...

There is the possibility that you can have a list within a list if necessary. An example, using an unordered list, is:

	<ul>
		<li>Tennis</li>
		<li>Football</li>
	<ul>
			<li>American Football</li>
			<li>English Soccer</li>
	</ul>
		<li>Swimming</li>
		<li>Badminton</li>
	</ul>

This would be represented as:

  • Tennis
  • Football
    • American Football
    • English Soccer
  • Swimming
  • Badminton




This is the end of this section, you can continue to the next section or try the exam to test your knowledge.
Click here to attempt the exam now.



Previous Page

Next Page

Go to top