Your HTML page can contain ordered,
unordered or glossary lists in addition to the regular text paragraphs. There are three
basic types of lists: ordered, unordered and glossary lists. We'll start with the ordered
list, also known as the numbered list.
The Ordered list
The tag to declare an ordered list is:
<ol>
For every object in your list, use the tags:
<li>Listed object</li>
For example, the following html code:
<ol><li>This is number one</li>
<li>This is number two</li>
<li>This is number three</li></ol>
will create this:
- This is number one
- This is number two
- This is number three
You can use the tag <ol type=> to
create the symbols your list will use. Putting an "a" after the equal sign will
create a numbered list using the lowercase alphabet instead of numbers. Putting an
"A" after the equal sign will create a list using the uppercase letters of the
alphabet. Putting an "i" will create it using lowercase roman numerals, and an
"I" using uppercase roman numerals.
You can also control from which number the list will start. This is done with the
attribute
<start=>
For example, the following html code
<ol type=I start=4><li>This is number one</li>
<li>This is number two</li>
<li>This is number three</li></ol>
will create this:
- This is number one
- This is number two
- This is number three
The Unordered list
The tag to create an unordered list is:
<ul>
Like the ordered list, for every object in your list, you use the tags:
<li>Listed object</li>
For example, the following html code:
<ul><li>This is an item</li>
<li>This is another item</li>
<li>This is a third item</li></ul>
will create this:
- This is an item
- This is another item
- This is a third item
Like the ordered list, the unordered list
also has a <type=> tag. It states the shape of the mark. The default shape is a
filled-in circle, but you may choose a hollowed circle ( <type=circle> ) or a square
( <type=square> ).
The Glossary list
The glossary list allows you to display a
brief definition of each object in the list. The tag to declare a glossary list is:
<DL>
The tag for the object is:
<DT> (definition term)
The tag for the description\definition is:
<DD> (definition data)
For example, the following text:
<DL><DT>The UL tag</DT>
<DD>Declares an unordered list</DD>
<DT>The Ol tag</DT>
<DD>Declares an ordered list</DD>
<DT>The LI tag</DT>
<DD>declares a list object in the OL and UL lists</DD>
<DT>The DD</DT>
<DD>Defines the object in the glossary list</DD></DL>
Would display this:
- The UL tag
- Declares an unordered list
- The Ol tag
- Declares an ordered list
- The LI tag
- declares a list object in the OL and UL
lists
- The DD
- Defines the object in the glossary list
Nesting lists
You can make nesting lists (lists inside
lists) by declaring a list (using the UL, OL or DL), and then declaring another list
without closing the first one. For example, the following HTML code:
<ul><li>This is an
item</li>
<li>This is another item</li>
<li>This is a third item</li>
<ul><li>This is an item in a nesting list</li>
<li>This is another item in a nesting list</li>
<li>This is a third item in a nesting list</li>
</ul><li>This is a fourth item</li></ul>
Would display this:
- This is an item
- This is another item
- This is a third item
- This is an item in a nesting list
- This is another item in a nesting list
- This is a third item in a nesting list
- This is a fourth item
Mailing List - Receive weekly website design tips right to your mailbox
FREE