AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Forums Forum ] [Contact Us Contact ] |WebDevTips Privacy Privacy |

WebDevTips Pick Of The Day : ".$todaytip[$today]." |

"; ?>
Print This Page



 


You are here : Home - Web Development - HTML - Lists - The Unordered List

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







Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]