There are three types of list formatting tags available in HTML.
- Unordered (or Bulleted) List
- Ordered (or Numbered) List
- Definition List
I've used Ordered List tags to create the list above. It's pretty straightforword.
First use the <ol> tag to start the ordered list. Then use the <li>
tag for each list item. Finally, end the ordered list with the </ol> tag.
Here's the markup...
<ol>
<li>Unordered (or Bulleted) List
<li>Ordered (or Numbered) List
<li>Definition (or Dictionary) List
</ol>
Creating an unordered list is just as easy. Simply replace the <ol> and
</ol> tags with the <ul> and </ul> tags to convert our ordered
list to an unordered one.
- Unordered (or Bulleted) List
- Ordered (or Numbered) List
- Definition List
You may vary the type of your ordered and unordered lists by using the type
attribute. For example, to show an ordered list with capital letters use
<ol type=A>
- item 1
- Item 2
Other types are: a(lowercase letters), i(lower case roman numerals),
and I (upper case roman numerals).
To show an unordered list with square bullets use
<ul type=square>
Other types are: disc and circle.
The Definition List markup is a little
more involved but no less straigtforward. The following is a
glossary of HTML list tags presented as a Definition List.
- <OL>
- Starts an ordered list
- <UL>
- Starts an unordered list
- <LI>
- Specifies a list item
- <DL>
- Starts a definition list
- <DT>
- Specifies term to define
- <DD>
- Specifies definition of term
- </OL>
- Ends an ordered list
- </UL>
- Ends an unordered list
- </DL>
- Ends a definition list
Note that occassionally the end tags </LI>, </DT>, and </DD>
are used. However, these tags are optional.
To create a definition list, start with <dl>, then use <dt> for the
term you want to define followed by <dd> for the definition. End the list with
</dl>. For example...
<dl>
<dt>HTML
<dd>Hyper-Text Markup Language
<dt>XML
<dd>EXtensible Markup Language
</dl>
Produces...
- <HTML>
- Hyper-Text Markup Language
- <XML>
- EXtensible Markup Language
Suppose you want to use an image as a bullet for your list instead of the
standard bullets used in Unordered lists. Simply use a definition list with
DT tags containing the image and list item. For example...
 List item 1- List item 2
Here's the markup...
<dl>
<dt><img src=bullet.gif><b>List item 1</b>
<dt><img src=bullet.gif><b>List item 2</b>
</dl>
Lists may also be nested. Just remember to observe the rules of nested tags which is, inside
tags should be closed before outside tags. Consider the following...
- New York
- Albany
- New York City
- Florida
- Maine
Here's the markup...
<ul>
<li>New York
<ol>
<li>Albany<li>>New York City
</ol>
<li>Florida
<ul>
<li>Orlando
</ul>
<li>Maine
</ul>
Now let's proceed to special characters.
Next >> |
