FREE Tutorials Resource Centre - bring a breath of fresh air to learning

Sunday, 19th May 2013

Bullet Point Lists
HTML Tutorial 6

Aims

Understand the two different types of lists
Understand embedded bullet lists
Ensuring W3C Compliance

Bullet Point Basics

These tutorials are littered with lists and bullets. They say things in short phrases and are useful for clarity.

There are two types of list: Bullets and "Numbering" - which includes using numbers and letters. In HTML-speak these are unordered and ordered lists, unordered lists refer to bullets and ordered lists refer to letters & numbers.

I have told you this because it helps when remembering the tags...

<ul></ul> - Unordered List - Bullets!
<ol></ol> - Ordered List - Numbers/Letters!

But this is not enough, oh no! That would be too easy wouldn't it?! You need to also tell your page that you want to put an item in your list, or more than one item. Your 'points' are called List Items and come in pairs of tags like so:

<li>An Item</li>.

You put this pair of tags as many times as you need items in your list - and they all need to be put between your UL/OL tags mentioned above as these ones define the boundaries of the list.

Bullet Specifics

In this tutorial, you will learn three different types of bullets and learning them is dead easy! The three types are: circle, disc, square.

This is a square bullet
This is a circle bullet
This is a disc bullet

To specify what type of list you want, you need to use the type attribute and simply put in which of the three you want! Told you it would be simple! So, take the Aims at the top, this is exactly the code I have used to put that in there:-

<ul type="circle">
<li>Understand the two different types of lists</li>
<li>Understand embedded bullet lists</li>
<li>Ensuring W3C Compliance</li>
</ul>

Numbered/Lettered Lists

Right, remember we are now dealing with OL, not UL and we can go from there. If you remember that the rest is really simple, because all we are doing is changing the "type" to do what we want.

The three simplest list types when dealing with ordered lists are:

A numbered list like this one
A list of letters - you can choose upper or lower case - designated using "a" or "A"
A list of roman numerals - also a choice or upper or lower case - designated using "i" or "I"

First Item
Second Item
Third Item
Fourth Item

First Item
Second Item
Third Item
Fourth Item

First Item
Second Item
Third Item
Fourth Item

First Item
Second Item
Third Item
Fourth Item

First Item
Second Item
Third Item
Fourth Item

Layers of Bullets (Nested Lists)

If your document is slightly more complicated and you need bullet lists inside bullet lists like this:-

Item 1
Item 2

Item 2b
Item 2c

Item 3

This is called 'Nesting' - putting one list inside another list. This is pretty simple to do as well if you've understood everything so far. You just need to put in another set of UL/OL inside an existing set. Probably easier to just show you how the above list was made!

So hopefully that makes sense to you now. You can mix-and-match the different bullet/list types, so you can give it a go to achieve what you want.

Achieving W3C Compliance

There are two main issues with compliance with bullet lists:- firstly you must close your </li> tags. In theory you can get away without the </li> tags - you will still get the same end-result, but if you want compliant web pages then do not forget these.

Secondly, at the last check W3C compliance was not possible if you want multi-level bullet lists. (So if you were to check this tutorial it would not be W3C Compliant). So ensure that the other bits are compliant and don't worry too much about it. Of course, the flip side is not to use multi-level lists unless you really need to.

One of the main reasons that perfectly logical HTML gives compliance errors is that W3C 'deprecate' (i.e. put out of mainstream use) certain features. Most of these are moved into the area of CSS which defines everything on your page, rather than be dependant on each individual page to be correctly written. In the case of these embedded lists, they simply don't want them used. Doesn't mean you can't use them, as this tutorial shows!

HTML Frames - Divide Up Your Page >>

Jump To: