HTML Lists

HTML Lists

HTML 4.0 supports three types of lists which are:

1. OL - Ordered list
2. UL - Unordered list
3. DL - Definition List

Directory and menu lists are depreciated.

Ordered Lists

Tags and Attributes

• <OL> - Designates the start of an ordered list
• TYPE="1" - (Depreciated) Designates the numerical label type for use in the list. Values are A for capital letters, a for small letters, I for large Roman numerals, i for small Roman numerals, 1 for numerical integers. Default is "1".
• START="3" - (Depreciated) Specifies value the list starts with. This value must be a number such as 1,2,3,4, etc and causes the first or current item of the list to begin with that value. If the type is set to "A" and start is set to "3", the list will start with the letter "C", the third letter of the alphabet. Default is "1".
• COMPACT - (Depreciated) The list is displayed with less room between elements.
• <LI> - Designates an item in the list.
• TYPE="A" - Designates the numerical label type for use in the list. Values are A for capital letters, a for small letters, I for large Roman numerals, i for small Roman numerals, 1 for numerical integers.
• VALUE="5" - Designates a new value for the list item which affects this value and those listed below it. This value must be a numerical value. If this value is set to "5" and the type is "I" the listed value will be the Roman number 5, "V".
• </OL> - Designates the end of an ordered list.

Ordered List Example

This is the HTML Code using depreciated attributes:

<ol type="I" start="5">

<li>This is the Roman number for 5.

<li>This is the Roman number for 6.

<li>This is the Roman number for 7.

<li tyle="A" value="10">This is the letter J, the tenth letter in the alphabet.

<li type="1">This is the number 11.

<li>This is the Roman number for 12.

</ol>

This is the HTML Code using style attributes (CSS has no substitute for the START or VALUE attributes):

<ol style="list-style-type='upper-roman'" start="5">

<li>This is the Roman number for 5.

<li>This is the Roman number for 6.

<li>This is the Roman number for 7.

<li style="list-style-type='upper-alpha'" value="10">This is the letter J, the tenth letter in the alphabet.

<li style="list-style-type='decimal'">This is the number 11.

<li>This is the Roman number for 12.

</ol>

And this is how it looks:

5. This is the Roman number for 5.
6. This is the Roman number for 6.
7. This is the Roman number for 7.

10. This is the letter J, the tenth letter in the alphabet.
11. This is the number 11.
12. This is the Roman number for 12.

Unordered Lists

Tags and Attributes

• <UL> - Designates the start of an unordered list
• TYPE=DISC - Designates the shape used for the bullet. Values are CIRCLE, DISC, and SQUARE. The default of the first embedded list is CIRCLE.
• COMPACT - (Depreciated) The list is displayed with less room between elements.
• <LI> - Designates an item in the list.
• TYPE=SQUARE - Designates the shape of the bullet for this item.
• </UL> - Designates the end of an ordered list.

Unordered List Example

This is the HTML Code using depreciated attributes:

<ul type="square">

<li>Item 1.

<li>Item 2.

<li>Item 3.

<li type="disc">Item 4.

<li>Item 5.

<li>Item 6.

</ul>

This is the HTML Code using style attributes:

<ul style="list-style-type='square'">

<li>Item 1.

<li>Item 2.

<li>Item 3.

<li style="list-style-type='disc'">Item 4.

<li>Item 5.

<li>Item 6.

</ul>

And this is how it looks:

• Item 1.
• Item 2.
• Item 3.
• Item 4.
• Item 5.
• Item 6.

If these items show up as the same on your browser, it is probably because your browser is too old to support these type shapes which were added with HTML 3.2.

Definition Lists

Tags and Attributes

• <DL> - Designates the start of a definition list.
• COMPACT - (Depreciated) The list is displayed with less room between elements.
• <DT> - Designates a definition term.
• <DD> - Designates a definition to go with the definition term.
• </DL> - Designates the end of a definition list.

Definition list example

This is the HTML code:

<dl><lh>Team Members

 <dt><b>Team Leader</b>

   <dd>Sarah Smith

 <dt><B>Programmer</b>

   <dd>Jim Jenkins

 <dt><B>Engineer</b>

   <dd>Jeff Jones

 <dt><B>Technician</b>

   <dd>Bill Brown

</dl>

And this is how it looks:

Team Members

Team Leader

Sarah Smith

Programmer

Jim Jenkins

Engineer

Jeff Jones

Technician

Bill Brown