HTML for the complete beginner

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.

Optional Quiz