The ul tag is used for creating an Unordered List, which is a list with bulletpoints instead of e.g. numbers or letters indicating an order. You can create a simple unordered list like this:

<ul>
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ul>

The result will look something like this:

• John Doe
• Jane Doe
• ...and all the others

As you can see, we use the <li> tag. It simply tells the browser that the containing text is a list item. Everything within a set of <ul> tags should be list items.

The type attribute

The most interesting attribute of the ul tag, is the type attribute. It allows you to define how the bullet points will look like. Click the type link, for a list of possible values. Here's an example where we use square bulletpoints instead of the default round ones:

<ul type="square">
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ul>

The result looks like this:

• John Doe
• Jane Doe
• ...and all the others

Unfortunately, the type attribute has been deprecated. If you wish to create pages which validates, you should use the CSS alternative list-style-type instead:

<ul style="list-style-type: square;">
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ul>

In general, CSS offers you a lot of options for styling you list. You can play around with the following CSS properties:

• list-style-image
• list-style-position
• list-style-type

© htmlpedia.net 2008 - 2010