What are List Tags?
Posted in HTML Tutorials |
Email This Post
Ordered list tag
List items are displayed using bullets.
Unordered list tag
List items are displayed using numbers.
Example:
<html> <head> <title> my first web page </title></head> <body> <ol> <h1>list of HTML tags</h1> <li> Header tag</li> <li>bold tag</li> <li> Italics tag</li> <li>underline tag</li> <!-- this is an example of ordered list tag--></ol> <hr /> <ul> <h1>list of HTML tags</h1> <li>Header tag</li> <li>bold tag</li> <li>Italic tag</li> <li>underline tag</li> <!-- this is an example of unordered list tag --></ul> </body> </html>
Output:
Definition List
Definition list is a series of term and definition pair.
Example:
<html> <head> <title>html code using list tag</title> </head> <body> <dl> <dt><strong> EMPTY HTML ELEMENTS</strong> <dd>HTML elements with no content are called as empty elements.<br> Empty elements doesnot have a closing tag.<br> Example Break line tag doesnot have a closing tag. </dl> </body> </html>
Using image as bullets:
Example:
<html> <head> <title> my HTML webpage</title></head> <body> <ul style="list-style-image:url(https://codingmanuals.com/wp-content/uploads/2010/08/pi.gif);"> <li>Image code</li> <li>Frame code</li> <li>Form code</li> </ul> </body> </html>
Output:
Example showing different types of bullets:
disc bullet:
Example:
<html> <head> <title> my HTML webpage</title></head> <body> <ul style="list-style-type:circle;"> <li>Image code</li> <li>Frame code</li> <li>Form code</li> </ul> </body> </html>
Output:
o Image code
o Frame code
o Form code
lower roman bullet:
Example:
<html> <head> <title> my HTML webpage</title></head> <body> <ul style="list-style-type:lower-roman;"> <li>Image code</li> <li>Frame code</li> <li>Form code</li> </ul> </body> </html>
Output:
i Image code
ii Frame code
iii Form code
Using the above code we can use different types of bullets. we just need to replace wanted bullet style as follows:
<ul style=”list-style-type:required bullet style”>
Few of the bullet styles are disc,circle,square,decimal,decimal-leading-zero,lower-roman,upper-roman,
lower-greek,lower-alpha,lower-latin,upper-aplha,upper-latin,hebrew,armenian,
cjk-ideographic,hiragana-iroha which are supported by google chrome.
decimal-leading-zero,lower-greek,lower-latin,hebrew,armenian,
cjk-ideographic are not supported by internet explorer.
