Lists

An ordered (numbered) list, like any list is easy to make and great for organizing / displaying information on your web pages.

<ol> <li>Red</li> <li>Yellow</li> <li>Orange</li> <li>Black</li> </ol>

Red Black Yellow Orange

Sometimes you may wish to split up your lists, and you may need to start a list from a different number. You just start="?", the ? being the number you start at.

<ol start="6"> <li>Red</li> <li>Black</li> <li>Yellow</li> <li>Orange</li> </ol>

Red Black Yellow Orange

An unordered (Bulleted list) list is done like so:

<ul> <li>Red</li> <li>Yellow</li> <li>Black</li> <li>Orange</li> </ul>

Red Yellow Black Orange

We can even display different types of bullets.

<ul type="circle"> <li>Red</li> <li>Yellow</li> <li>Black</li> <li>Orange</li> </ul>

Red Yellow Black Orange

<ul type="square"> <li>Red</li> <li>Yellow</li> <li>Black</li> <li>Orange</li> </ul>

Red Yellow Black Orange

<ul type="disc"> <li>Red</li> <li>Yellow</li> <li>Black</li> <li>Orange</li> </ul>

Red Yellow Black Orange

You can combine ordered and unordered lists to make outlines.

<ol> <li>Colors <ul> <li>Red</li> <li>Yellow</li> <li>Orange</li> <li>Black</li> </ul></li> <li>Colours <ul> <li>Blue</li> <li>Green</li> <li>Grey</li> <li>Lime</li> </ul></li> </ol>

Colors Red Yellow Orange Black Colours Blue Green Grey Lime

To make an alphabetical list, add type="A" to the <OL> tag, like so:

<ol type="A"> <li>Red</li> <li>Black</li> <li>Yellow</li> <li>Orange</li> </ol>

Red Black Yellow Orange

To use Roman numerals, add type="I" to the <OL> tag, like so:

<ol type="I"> <li>Red</li> <li>Black</li> <li>Yellow</li> <li>Orange</li> </ol>

Red Black Yellow Orange

A definition list is done similar to the above but with <dl> (definition list), <dt> (definition title) and <dd> (definition data)

<dl>
<dt>heading one</dt>
<dd>this could go on and on and on .....this could go on and on and on ... </dd>
<dt>heading two</dt>
<dd>this could go on and on ... </dd>
</dl>

heading one

this could go on and on and on ... this could go on and on and on ... this could go on and on and on ...

heading two

this could go on and on and on ...

Nesting lists isn't really advised (not sure where you'd use it) but can be done by:

<ul><li>one <ul><li>two <ul><li>three</li> </ul></li></ul></li></ul>

one two three

---

Common errors

• Typos are always a problem, remeber ol = ordered list, ul = unordered list, li = list objects
• Missing end tag, or wrong order of tags, missing quote

Summary

• We have seen how to make ordered (numbered) lists.
• We have seen how to make unordered (bulleted) lists.
• We have seen how change the bullets and starting numbers etc.
• We have seen how to make a definition list

Exercise

• Make a list listing some good things about yourself
• Write a few sentences about (anything) using the definition list
• Make a list of links listed by a list of your choice

These exercises are to get you going, the more you do the better you'll get so if you want to try something go for it, do it. Don't be afraid of trying new things, with HTML the worse you can do is lock up your computer (save your work as you go). HTML is an easy language but trying to filter it down into subjects is hard because every part of it is used within each other.

• This is optional to see if you know what we have learnt so far. Take the quiz