What are List Tags?

Posted in HTML Tutorials | Email This Post 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:
HTML code using ordered and unordered tags

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(http://www.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:
image used as bullets

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.

More Entries :

Languages Tutor

Best Hosting

Softwares For Coders

Best Hosting

Recently Added

Spread the Word