Bullet and Numbering or List Tag

Published by Admin on

Table of Contents hide
1. Example : Using Bullet and Numbering or List Tag to create an Unordered List/Bullet menu (ul) on an HTML page.
2. Example : Using Bullet and Numbering or List Tag to create an Ordered List/menu (ol) on an HTML page.
3. Example : Using Bullet and Numbering or List Tag to create a Customized/User defined Unordered List/Bullet menu (ul) in an HTML page.
4. Example : Using Bullet and Numbering or List Tag to create both Unordered List/Bullet menu (ul) and Ordered List/menu (ol)[Hybrid List] on an HTML page.
Example : Using Bullet and Numbering or List Tag to create an Unordered List/Bullet menu (ul) on an HTML page.
<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>		
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>		
	</body>
</html>

Output :

List of Fruits
.Apple
.Mango
.Guava
.Orange
.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

List of Fruits
.Apple
.Mango
.Guava
.Orange
.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="disc">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

List of Fruits
.Apple
.Mango
.Guava
.Orange
.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>		
		  <li>Apple</li>
		  <li>Mango</li>
		  <li style="list-style-type:none; margin-left:22px">Guava</li>
		  <li style="list-style-type:none; margin-left:22px">Orange</li>
		  <li>Grapes</li>		
	</body>
</html>

Output :

List of Fruits
.Apple
.Mango
 Guava
 Orange
.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="circle">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

List of Fruits
o Apple
o Mango
o Guava
o Orange
o Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ul type="square">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

   List of Fruits
 squaresymbol Apple
 squaresymbol Mango
 squaresymbol Guava
 squaresymbol Orange
 squaresymbol Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
	<h2>List of Fruits</h2>

		<ul type="none">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ul>
	</body>
</html>

Output :

List of Fruits
 Apple
 Mango
 Guava
 Orange
 Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<head>
		<style>
			li{
			    list-style-type: none;  //list-style: none;
			}
		</style>
	</head>
	<body>
		<h2>List of Fruits</h2>		
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>		
	</body>
</html>

Output :

List of Fruits
 Apple
 Mango
 Guava
 Orange
 Grapes
Example : Using Bullet and Numbering or List Tag to create an Ordered List/menu (ol) on an HTML page.
<!DOCTYPE html>

<html>
	<body>
		<h2>List of Fruits</h2>

		<ol>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="Decimal">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="xyz">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
1.Apple
2.Mango
3.Guava
4.Orange
5.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1" reversed>
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
5.Apple
4.Mango
3.Guava
2.Orange
1.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="A">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
A.Apple
B.Mango
C.Guava
D.Orange
E.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="a">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
a.Apple
b.Mango
c.Guava
d.Orange
e.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="I">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
I.Apple
II.Mango
III.Guava
IV.Orange
V.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="i">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
i.Apple
ii.Mango
iii.Guava
iv.Orange
v.Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Fruits</h2>

		<ol type="1" start="5">
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>
		</ol>
	</body>
</html>

Output :

List of Fruits
5.Apple
6.Mango
7.Guava
8.Orange
9.Grapes
Example : Using Bullet and Numbering or List Tag to create a Customized/User defined Unordered List/Bullet menu (ul) in an HTML page.
<!DOCTYPE html>
<html>
	<head>
		<style>
			li{list-style:none;}		
			li:before 
				{
				   content: "*";
				   color: green;
				   font-size:25px; // to make bullet size larger				
				}		
		</style>
	</head>

	<body>
		<h2>List of Fruits</h2>		
		  <li>Apple</li>
		  <li>Mango</li>
		  <li>Guava</li>
		  <li>Orange</li>
		  <li>Grapes</li>		
	</body>
</html>

Output:
 
List of Fruits
* Apple
* Mango
* Guava
* Orange
* Grapes

-----------  OR  -----------

<!DOCTYPE html>
<html>	
   <body>
	<h2>List of Numbers</h2>

	<ul style="list-style-type: '\1F44D'; margin-left: 0.5em">

	<!-- padding-left is the spacing between the text and the list character -->
	<!-- padding-bottom is the vertical spacing between each list item -->

	   <li style="padding-left: 0.25em; padding-bottom: 0.25em">One</li>
	   <li style="padding-left: 0.25em; padding-bottom: 0.25em">Two</li>
	   <li style="padding-left: 0.25em; padding-bottom: 0.25em">Three</li>
	</ul>
   </body>
</html>

Output:

Example : Using Bullet and Numbering or List Tag to create both Unordered List/Bullet menu (ul) and Ordered List/menu (ol)[Hybrid List] on an HTML page.
<!DOCTYPE html>

<html>
	<body>
		<h2>List of Books</h2>

		<ul type="Circle">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
		  	<ul>Computer Fundamentals</ul>
		  	<ul>C Prog. Lang.</ul>
		  	<ul>DBMS</ul>
		  	<ul>Computer Network</ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ul>
	</body>
</html>

Output :

List of Books
o Physics
o Chemistry
o Computer Science
   Computer Fundamentals
   C Prog. Lang.
   DBMS
   Computer Network
o Biology
o Math

-----------  OR  -----------

<!DOCTYPE html>

<html>
	<body>

		<h2>List of Books</h2>

		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
		  	<ul>Computer Fundamentals</ul>
		  	<ul>C Prog. Lang.</ul>
		  	<ul>DBMS</ul>
		  	<ul>Computer Network</ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

List of Books
A.Physics
B.Chemistry
C.Computer Science
   Computer Fundamentals
   C Prog. Lang.
   DBMS
   Computer Network
D.Biology
E.Math

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Books</h2>
		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
	  		  <ol>
		  		<li>Computer Fundamentals</li>
		  		<li>C Prog. Lang.</li>
		  		<li>DBMS</li>
		  		<li>Computer Network</li>
			  </ol>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

List of Books
A.Physics
B.Chemistry
C.Computer Science
   1.Computer Fundamentals
   2.C Prog. Lang.
   3.DBMS
   4.Computer Network
D.Biology
E.Math

-----------  OR  -----------

<!DOCTYPE html>
<html>
	<body>
		<h2>List of Books</h2>
		<ol type="A">
		  <li>Physics</li>
		  <li>Chemistry</li>
		  <li>Computer Science
	  		  <ul type="circle">
		  		<li>Computer Fundamentals</li>
		  		<li>C Prog. Lang.</li>
		  		<li>DBMS</li>
		  		<li>Computer Network</li>
			  </ul>		  
		  </li>
		  <li>Biology</li>
		  <li>Math</li>
		</ol>
	</body>
</html>

Output :

List of Books
A.Physics
B.Chemistry
C.Computer Science
   o Computer Fundamentals
   o C Prog. Lang.
   o DBMS
   o Computer Network
D.Biology
E.Math

Loading

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

HTML

Terminology & Miscellaneous

Web Page/Page Multimedia documents(a document contains information in the form of text, image, audio, animation, video etc) when formatted and annotated with the Hypertext Markup Language (HTML) which mainly includes hypertext, hypermedia etc. are called Read more…

HTML

Password Tag

Example : A password box with show/hide the contents using eyeicon. Example : A password box with show/hide the contents using checkbox. Example : A password box to validate at least one uppercase, lowercase, number Read more…

HTML

Tags & Attributes in html (Theory)

HTML Tags Definition HTML tags are used to define the structure and content of a webpage. Types of HTML Tags (A) Start/Opening Tag & End/Closing Tag : Most of the HTML tags come in pairs like  Read more…