Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create unordered list in HTML
Overview
By using the HTML we can create two types of lists for the web pages: these two lists are ordered lists and unordered lists. An unordered list is a list which is created using the HTML <ul> tag and the list items are inserted to it. The list items are inserted using the <li> tag. So when the unordered list is created with the li tags with the data in some of the li tags. The list created is followed up by some point or bullets. These bullets can only be circle, square or disc type.
Syntax
The syntax to create the unordered list is −
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
Algorithm
Step 1 − Create a HTML file in your text editor and also create an HTML boilerplate in it.
Step 2 − Create a div container to make an unordered list.
Step 3 − Use the <ul> tag to make the unordered list.
Step 4 − Now insert a list tag as <li> inside the unordered list.
Step 5 − If you want to add more lists to the unordered list repeat step 4.
Step 6 − The unordered list is created successfully.
Example
In this example we have created an unordered list using the HTML <ul> tag and inserted the list items using <li> tag. The bullets of the list will c=be created by default.
<html>
<head>
<title>unordered list in HTML</title>
</head>
<body>
<h3>Number of items in a todo's list</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</body>
</html>
The given below image shows the output of the above example, which shows a number of items in the form of a list with the default bullet items.
Algorithm
Step 1 − Create a HTML file in your text editor and also create an HTML boilerplate in it.
Step 2 − Create a div container to make an unordered list.
Step 3 − Use the <ul> tag to make the unordered list.
Step 4 − Now insert a list tag as <li> inside the unordered list.
Step 5 − Now change the styling of the bullets using the list style type property.
Step 6 − If you want to add more lists to the unordered list repeat step 4 and if you want to change the list styling of bullets use step 5.
Step 7 − The unordered list is created successfully.
Example
In this example we have created an unordered list with different types of list styles in it. There are different types of list style such as circle, disc, lower roman, Armenian, decimal starting zero and many more.
<html>
<head>
<title>unordered list in HTML list styles</title>
</head>
<body>
<h1>tutorialspoint.com</h3>
<h2>unordered lists</h3>
<div style="display: flex;gap: 1rem;">
<div style="border:1px solid black;padding: 0.5rem;">
<h3>list style type armenian</h3>
<ul style="list-style: armenian;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
<div style="border:1px solid black;padding: 0.5rem;">
<h3>list style type lower-greek</h3>
<ul style="list-style:lower-greek;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
<div style="border:1px solid black;padding: 0.5rem;">
<h3>list style type deciaml leading zero</h3>
<ul style="list-style:decimal-leading-zero;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
<div style="border:1px solid black;padding: 0.5rem;">
<h3>list style type lower roman</h3>
<ul style="list-style:lower-roman;">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>
</div>
</div>
</body>
</html>
The given below image shows the output of the above example, which shows four different lists. These all four unordered lists have different list styles. The first unordered list has the bullet style as Armenian, second unordered list has the list style lower-greek, third unordered list has the list style decimal leading zero and fourth unordered list has the list style lower roman.
Conclusion
The unordered list is used in the application to display the list of items. Previously the navbar navigation items were also created by using the unordered list, list items. If we want to remove the bullets from the list of the unordered list then by using the styling property list style and setting its value to none.
521 Views
