Google
 

Monday, December 3, 2007

List Tags

(numbered lists, bullet lists, etc)
 

HTML Tags including UL - LI - OL - MENU - DD - DT - DIR – TYPE

 

---------------------------------------------------------------------------------

HTML tags - List Tags


<UL> <LI> </UL> - Unordered list - <UL> denotes the start of an unordered list </UL> denotes the end of an unordered list, the <LI> is a list item see below for an example.

<UL>
<LI>list item number 1
<LI>List item number 2
<LI>List item number 3
</UL>

will produce :

  • List item number 1
  • List item number 2
  • List item number 3

There are other attributes you can use with these tags, these are dealt with further down the page.

 

----------------------------------------------------------------------------------------------------------------------

 

<OL> <LI> </OL> - Ordered list - <OL> denotes the start of an ordered list and </OL> denotes the end of an ordered list, <LI> is a list item, see below for an example.

<OL>
<LI>List item number 1
<LI>List item number 2
<LI>List item number 3
</OL>

will produce :

  1. List item number 1
  2. List item number 2
  3. List item number 3

There are other attributes you can use with these tags, these are dealt with further down the page.

 

----------------------------------------------------------------------------------------------------------------------

 

<MENU> <LI> </MENU> - Menu list - <MENU> denotes the start of the menu (similar to the <UL> tag), and </menu> denotes the end of the menu, <LI> is a menu/list item see below for an example.

<MENU>
<LI>Menu item number 1
<LI>Menu item number 2
<LI>Menu item number 3
</MENU>

will produce :

  Menu item number 1

  Menu item number 2

  Menu item number 3

This tag is suitable for listing URLs.

 

 

----------------------------------------------------------------------------------------------------------------------

 

 

<DIR> <LI> </DIR> - Directory list - <DIR> denotes the start of the dir listing and </DIR> denotes the end of the dir listing, <LI> is a Dir/list item see below for an example.

<DIR>
<LI>Dir listing 1
<LI>Dir listing 2
<LI>Dir listing 3
</DIR>

will produce :

  Dir listing 1

  Dir listing 2

  Dir listing 3

This (in some browsers) will create a list similar to <UL> but in narrow columns, and is usually used to list the contents of a directory.

 

 

----------------------------------------------------------------------------------------------------------------------

 

 

<DL> <DT> <DD> </DL> - Definition list - <DL> denotes the start of the definition list, <DT> denotes a Definition Term, <DD> denotes a Definition and </DL> denotes the end of the definition list. See below for an example.

<DL>
<DT>1st Term
<DD>1st Definition
<DT>2nd Term
<DD>2nd Definition
<DT>3rd Term
<DD>3rd Definition
</DL>

will produce :

1st Term

1st Definition

2nd Term

2nd Definition

3rd Term

3rd Definition

 

---------------------------------------------------------------------------------

 

Here are some attributes you can use within the list tags along with examples :

TYPE - this can be used with the <UL>, <OL> and <LI> tags, it can have various effects here is one example :

<UL TYPE=SQUARE>
<LI>1st listing
<LI>2nd listing
</UL>

will produce :

  • 1st listing
  • 2nd listing

the parameters you can use with the TYPE attribute are CIRCLE, SQUARE (as above), DISC and some more which are described below :

The following parameters when used with the TYPE attribute can change the appearance of ordered lists, these are A, a, I, i, and 1.

where <OL TYPE=A> as used below :

<OL TYPE=A>
<LI>1st listing
<LI>2nd listing
<LI>3rd listing
</OL>

will produce :

  1. 1st listing
  2. 2nd listing
  3. 3rd listing

and <OL TYPE=a> will produce :

  1. 1st listing
  2. 2nd listing
  3. 3rd listing

and <OL TYPE=I> will produce a list in large Roman Numerals :

  1. 1st listing
  2. 2nd listing
  3. 3rd listing
  4. 4th listing

and <OL TYPE=i> will produce a list in small Roman Numerals :

  1. 1st listing
  2. 2nd listing
  3. 3rd listing
  4. 4th listing

and 1 will produce a numerical list, these parameters can be used with the <LI> tag as well, for example <LI TYPE=A> allowing you to choose a different list type for an item (and the subsequent).

 

 

------------------------------------------------------------------------------------------------------------

 

 

 

Another attribute that you can use with the <LI> tag is VALUE, this sets the value for the list item and the subsequent, for example :

<OL>
<LI VALUE=6>list item
<LI>list item
<LI VALUE=14>list item
<LI>list item
</OL>

will produce :

  1. list item
  2. list item
  1. list item
  2. list item


Another attribute you can use with the <OL> tag is START, this sets the starting value of an ordered list, for example :

<OL START=55>
<LI>List item
<LI>List item
<LI>List item
</OL>

will produce :

  1. List item
  2. List item
  3. List item

---------------------------------------------------------------------------------

 

Another attribute you can see with <OL>, <UL>, <DL>, <DIR> and <MENU> is COMPACT , this produces a more compact list when used with any of these tags. One example is :

<OL COMPACT>
<LI>list item
<LI>list item
<LI>list item
<LI>list item
</OL>

will produce :

  1. list item
  2. list item
  3. list item
  4. list item

 

No comments: