HTML Help * News * Internet Style * Who is she? * Awards
Tip o' the Week: More on Lists
So you've got your list of things and your buttons, but you want a bit more flare, some variety and some ideas on how to CODE your list? Well, you've come to the right place.
This week, we're looking at different types of lists in HTML. I'm going to show you three different types of lists you can put on your webpage: Ordered Lists, Unordered Lists and Glossary Lists.
Eh, what?
Okay, the names don't tell you much, so let's go through them one by one and see what they look like AND how to code 'em.
Ordered Lists: These let you number things. Great for Top Ten lists and the like. Here's an example:
My Very Orderly List
- First things first!
- Don't forget seconds!
- Third and finally. . . .
The code for an ordered list is pretty simple:
<OL> Gets the list started
<LI> Put this in front of each element. It automatically generates the number for you!
<LI> Use this as many times as you need for all of your list items
</OL> Make sure to use this to END your list!
Unordered Lists:
Unordered Lists work well with bullets. They don't generate numbers so your bullet can be inserted at the start of each item.
Here's an example of an unordered list WITHOUT any bullets.
My Any-Which-Way List
- Here's the first item which just appears with a plain little bullet, nothing very special but it looks pretty good, doesn't it?
- Here's another
- and another
You'll be happy to know that the code for an unordered list is almost identical to that for an ordered list. Just substituted "U" for "O" and you've got it! Wanna see?
<UL> Use this to start your unordered list
<LI> Hey, doesn't this look familiar?
<LI> Yup, it is the SAME code as appeared in ordered lists
</UL> Remember to close your list with this code
Glossary Lists:
This is a fancy name for a list you might want to add a bit more information to each item. . . like a definition for a word (think dictionaries)!
You can add bullets to a glossary list or leave it plain. See how it works:
Here goes the glossary list
- Item One
- What's it all about!
- Item Two
- Something about it and so on and so on. . . .
Want to see the code? This might look familiar to some of you!
<DL> This starts the glossary list code
<DT> This generates the first Term or Item Spot
<DD> Here goes the first definition
<DT> Second Term
<DD> Second definition and so forth
</DL> Don't forget to END the list!
So, there you go! Three different types of lists! Go explore and enjoy!
Return to the Tip Archive for past handy hints.
BR>
Created by Ancarett. Updated 28 June, 2001.