How to create an 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 −

  • 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.

<!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 −


Advertisements