While simple in concept, lists can be very powerful in execution.
There are three types of lists: unordered lists, ordered lists, and definition lists.
The first two are very similar in structure, while definition lists have a unique setup.
|
UNORDERED LISTS |
The term "unordered list" may be a bit unfamiliar to you,
but odds are you've heard of the "bullet list." That's exactly what an unordered
list is -- a list of items, each one preceded by a "bullet" (a distinctive character;
typically, a small black circle).
The list begins and ends with the tags respectively. Each item in the
list is marked using the tag, which stands for "List Item." has a
corresponding , but this closing tag is not required to end the list item
(although you could use one if you really wanted to). You can use as many list
items as you like, up to your browser's built-in maximum, if any.
Here's the markup for a simple list:
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
If you loaded an HTML page containing the markup above, you would see the days of
the week, each one preceded by a "bullet." To wit:
� Monday
� Tuesday
� Wednesday
� Thursday
� Friday
Almost anything can be put into a list item -- line breaks, entire paragraphs,
images, links, or even other lists. For example:
- Monday
- Tuesday
- Wednesday
- 6am - 9am
- 9am - 12n
- 12n - 3pm
- 3pm - 6pm
- Thursday
- Friday
In the above case, under "Wednesday" in the 'outer list,' you would find another
unordered list (the three-hour blocks of time), which is referred to as a nested list.
(In the markup above, I have indented the nested list for purposes of clarity;
this is not required for the lists to work. Remember what I've said about whitespace...)
Here's how it looks:
� Monday
� Tuesday
� Wednesday
o 6am - 9am
o 9am - 12n
o 12n - 3pm
o 3pm - 6pm
� Thursday
� Friday
|
ORDERED LISTS |
On the face of it, ordered lists look a lot like unordered lists,
and a lot of the same rules apply to both constructs. The only difference in HTML
is that instead of using an ordered list is contained within the tags
. Ordered lists are based on list items, just as unordered lists are.
However, when an ordered list is displayed in a Web browser, it uses an automatically
generated sequence of item markers. In other words, the items are numbered.
The above markup will look similar to the previously discussed simple unordered list,
with the important difference that each day of the week is numbered instead of preceded
by a "bullet." In other words, it looks like this:
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
|
DEFINITION LISTS |
As you might expect, definition lists begin and end with the tags
However, unlike the unordered and ordered lists, definition lists are not based on list
items. They are instead based on term-definition pairs.
A good way to think of it is that stands for "Definition-list Term"
and stands for "Definition-list Definition." When the above list is displayed,
it arranges the elements such that each term is associated with the corresponding
definition. The exact arrangement of elements may vary from browser to browser.
Here's how the above markup comes out:
- Do
- a deer, a female deer
- Re
- a drop of golden sun
- Mi
- a name I call myself
- Fa
- a long, long way to run
- Sol
- a needle pulling thread
- La
- a note to follow so
- Ti
- a drink with jam and bread
Similar to ordered and unordered lists, definition lists can be arbitrarily long.
Almost any structure can be placed in a tag, but putting large-scale structures
(such as paragraphs, headings, and other lists) in the tag is not legal, according
to the HTML Specification 2.0. You can leave out one part of a DT-DD pair, but this is not
recommended.
Similar to ordered and unordered lists, definition lists can be arbitrarily long.
Almost any structure can be placed in a tag, but putting large-scale structures
(such as paragraphs, headings, and other lists) in the tag is not legal, according
to the HTML Specification 2.0. You can leave out one part of a DT-DD pair,
but this is not recommended.
|
