How to create lists in HTML

list html tags
When you are creating a webpage you may wish to list some of the content to make it more legible. Here we look at the various ways that a list of items can be displayed within a HTML document. We also cover some of the attributes that can be assigned to the different list items to change the way they are listed.

The Unordered List element

<UL> <LI> </UL>

<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.

The Ordered List element

<OL> <LI> </OL>

<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.

The Menu List element

<MENU> <LI> </MENU>

<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.

    The Directory List element

    <DIR> <LI> </DIR>

    <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.

    The Definition List element

    <DL> <DT> <DD> </DL>

    <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

    Other attributes which can be applied

    Here are some attributes you can use within the list elements 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.

    <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
    3. list item
    4. 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


    © Copyright 2001-2014 HelpWithPCs.com All Rights Reserved