Wednesday, August 13, 2008

Unordered Lists - the <ul> tag

An unordered list is one which is not numbered. This implies that the order of the items in the list is not important. Ordered lists are also useful in navigation bars - they are used to present a collection of site-navigation links.
The ul element contains the items of an unordered list. The ul tag is a block element that cannot be contained within p elements. It can, however, be contained in blockquote and div elements. Each item of the list is contained in li tags. The ul tag can only contain li tags - no other content is allowed.
All major browsers render unordered lists as bulleted lists. Bullets are, by default, small solid discs that are displayed to the left of each item in the list. All major browsers indent the bullets from the left. The exact amount of indentation is not specified by any standard.
Example: <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

This is rendered in Firefox 3 as below:

Note that unordered lists can be nested. Thus, you can have sub-items in a list. The following example shows an unordered list where the first item, "Item 1", has three sub-items. We first enter the name of the sub-list in the li element. This is then followed by the ul tag and the rest of the code of the sub-list.
Example:
<ul>
<li>Item 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

No comments: