The Unordered List

Un-Ordered lists are basically bullet points. These tend to be the most commonly used lists. Take a look at these examples

Type : Circle	Type : Disc *	Type : Square
item 1 item 2 item 3	item 1 item 2 item 3	item 1 item 2 item 3
the html code
<ul type="circle"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>	<ul type="disc"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>	<ul type="square"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

So we can see that the un-ordered list can have different bullet styles defined in the <ul type="square"> tag. If no type is defined <ul>, the default will be used which is disc.

Please note the correct code structure.

We can also apply the bullet type to individual list items. Look at the example below.

Output	html code
item 1 item 2 item 3	<ul> <li type="circle">item 1</li> <li type="disc">item 2</li> <li type="square">item 3</li> </ul>

All we done was add the type="" to the <li> tag - <li type="circle">

Finally we have one more attribute that we can use. Take a look at this example.

item 1
item 2
item 3

Notice that the bullets are now on the right hand side. this is done using the dir="" (direction) attribute. Here's the html code

<ul type="square" dir="rtl">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

The default value if none specified is the same as dir="ltr" - left to right. From that you can deduct that dir="rtl" is right to left :)

So, as far as un-ordered lists go that's about everything you need to know. Just remember to format your tags correctly.

Next we'll take a look at ordered list

a look at lists | un-ordered list | ordered list
definition list

Why not discuss this article in our forum?

Other related guides : webpage basics | forms

[back to top of page]

[

] [

]

Search
	[ Web] [ WebDevTips]