In this chapter, we take a look at the two different types of lists available in HTML and what they're for.
Unordered Lists
Unordered lists are lists that are... unordered. When you want to group together a list of related items, a good old unordered list will do the job. The HTML code for an unordered list about say... terrible TV programs will look something like this:
<ul>
<li>Big Brother</li>
<li>Hollyoaks</li>
<li>Blind Date</li>
</ul>
As you can see, I put Big Brother at the top of this list because I hate it so dog garn mu... *ahem*.
Working from the inside out, each list item is opened with an <li> tag, and is closed with an </li>. The entire list is then wrapped within <ul> and </ul>. And don't worry it is no co-incidence, the ul really does stand for unordered list! Here's the output for a list just like the one above, that I made earlier:
- Big Brother
- Hollyoaks
- Blind Date
Ordered Lists
You'll be pleased to know that ordered lists are very, very similar. Ordered lists simply display numbers instead of bullet points, and the best bit, for those of you who are as lazy as I am, is that the numbering is taken care of for you.
Ordered lists can be used in any situation where you feel they are appropriate. Some good examples of ordered lists: a top ten list of products you like, a list of instructions for a recipe, a list of five things you think people should remember when they go on holiday.
The markup for an ordered list showing in order of priority the things you should be doing today (#1 being the most important) would be:
<ol>
<li>Visit Scott's Website</li>
<li>Solve world hunger</li>
<li>Tell girlfriend you love her</li>
</ol>
Like I say, it's really not much different to an unordered list. Just remember: <ol> for Ordered List. <ul> for Unordered list! Everything else is the same. The above code would output:
- Visit Scott's Website
- Solve world hunger
- Tell girlfriend you love her
This concludes lists! You really are coming along well with the HTML tags now. Now reinforce this new listy information by trying it out yourself! And finally, make sure it's all sunk in properly by taking the end of chapter quiz.