Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Unordered List with Image Bullets in HTML
An ordered list is numbered and an unordered list is not numbered it can be created with the tag <ul></ul> and define the items of the list using the tag <li></li>. We can create 4 types of unordered list in HTML ?
In this article we are having an unordered list, our task is to create an unordered list with image bullets in HTML.
-
disc ? This creates an unordered list marked to a bullet (default).
-
circle ? This creates an unordered list marked to a circle.
-
square ? This creates an unordered list marked to a square.
-
none ? This creates an unordered list without any marker.
Syntax
Following is the syntax to create an unordered list with square bullets in HTML.
<ul style="list-style-image: url(image.png)"> <li>Item in list?</li> <li>Item in list?</li> <li>Item in list?</li> </ul>
Example 1
Given below is an example to create an unordered list with image bullets in HTML. We have used list-style-image property with url() function to create the unordered list with image bullets.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul style="list-style-image: url(images/11.png)"> <li>Abdul</li> <li>Jason</li> <li>Yadav</li> </ul> </body> </html>
Following is the output for the above example program.
Example 2
Let us look at another example to create an unordered list with image bullets ?
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <h2>Tutorials</h2> <p>The list of tutorials:</p> <ul style="list-style-image: url('/theme/css/icons/image-editor.png');"> <li>Java</li> <li>C++</li> <li>Ruby</li> </ul> </body> </html>
Upon executing the above code, the output is achieved as ?
9K+ Views
