There are three types of lists that we can use on our web pages:
Unordered Lists should be used when you wish to have a list of data but there is no specific order to that list. The list I’ve used above, to list the list types, is an unordered list. An unordered list can also be associated with a bullet point list.
The correct syntax for an unordered list is[sourcecode language=”html”]
Which would give us:
An unordered list is probably the most used HTML list. It’s used as a standard bullet point list, or it’s often used to hold lists of data which is then styled (more on that next week!) to control the look of the list, and often to remove the bullet points completely. Most modern coded websites use an unordered list for their navigation menu, regardless of whether it’s a vertical or horizontal list. On Blogging Tips the top navigation is in fact an unordered list. This is marked up with code similar to the following (I’ve just removed most of the classes to make it easier to read):[sourcecode language=”html”] [/sourcecode]
As you can see, before the styling is applied, the menu is just an unordered list. If you turn the CSS off in your browser you will get a standard bullet point list.
When you have a specific order for a list then you should use an ordered list. This is fairly similar in mark up to an unordered list, except the opening and closing tag are different. To create a numbered list we use[sourcecode language=”html”]
Which would give us an output of
To change the ordering from numbers to letters or other sequential ordering we use CSS, which I’ll cover next week.
There is one attribute that goes into the list item, which allows you to change the order value of that item. This also causes all later list items to follow on sequentially from that value i.e. it has a knock on effect. For example, if you wanted to omit the number 2 from your list, then you can use the attribute ‘value’ to do this e.g.[sourcecode language=”html”]
And this would give us:
I’m sure at this point, someone will point out that the value attribute is in fact deprecated for XHTML 1.0 and HTML 4.01. The W3C realised this was a mistake at some point, as this is in the XHTML 2.0 specification, and on that basis I still continue to use the value attribute, as it’s very useful!
The least used, and often not even understood list is a definition list. Personally I think that’s a shame as a definition list has a lot more use than people realise, and to create a better structured site, it certainly has its place. A definition list is just that, a list of titles and descriptions. The basic usage of this is:[sourcecode language=”html”]
This would give us the output of
However, definition lists can be used for so much more than a simple title and description list. There are many uses for it – a list of FAQs is probably the simplest of examples; menu items – the section header in the definition title, and then inside the definition description is an unordered list with all the items for that section; a dictionary reference with the word as the definition title and then several definition descriptions depending on how many there were. There are plenty of other uses for a definition list. I always use them when explaining CSS properties.
When you intend to have a list of information, regardless how it’s going to look, then you should usually be using a list of some description. Just make sure you try and pick the right one! Next week I’ll explain how we can style these lists and this will open up the potential that lists really have in your design.