Web Central : HTML

Membership

Navigation
Home About Web Central About Web Manager Training Manuals

Website Stats
Site Statistics Most Read Websites Most Recent Updates

Tools

Web Browsers

Netscape (latest version)

Netscape 7.2

Lynx (text-only)
Mac OS X Win NT/2000/XP Win 95/98/NT

Copyright
Permission Request

Articles

Blogs & Wikis

Blog-Student Journals on the Web

Universal Accessibility
Quick Tips for Accessible Web Pages Guide to Accessible Web Design

HTML - Lists

Bulleted / Unordered Lists

Unordered Lists start each item with a bullet.

<ul type="value"> starts an Unordered List (not numbered). Type is an optional parameter than can be disc, circle, or square.
<li> starts a List Item.
</li> ends the List Item.
</ul> ends the Unordered List.

Don't let the code confuse you! Here are a few examples with the code:

Code	Sample
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>	Item 1 Item 2 Item 3
<ul type="square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>	Item 1 Item 2 Item 3

Numbered / Ordered Lists

Ordered Lists start each item with a number / letter that increased for every item.

<ol type="value" start="num"> starts an Ordered List (numbered).
Type is an optional parameter than can be 1, a, A, i, or I.
Start is an optional parameter that sets the starting number of the list.
</ol> ends the Ordered List.

Code	Sample
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3
<ol type="a"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3
<ol type="A"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3
<ol type="i"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3
<ol type="I"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3
<ol start="5"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>	Item 1 Item 2 Item 3

Combination of Lists

You can combined all of the above examples together. You can even combined ordered lists with unordered lists. Have Fun!!!

Code	Sample
<ol> <li>Item 1 <ul> <li>Sub-Item 1</li> <li>Sub-Item 2</li> </ul> </li> <li>Item 2 <ol type="A"> <li>Sub-Item 1</li> <li>Sub-Item 2</li> </ol> </li> <li>Item 3</li> </ol>	Item 1 Sub-Item 1 Sub-Item 2 Item 2 Sub-Item 1 Sub-Item 2 Item 3