Home > Article > Web Front-end > How to create an unordered list with image symbols in HTML?
How to create an unordered list with image symbols in HTML?
- WBOYforward
- 2023-09-06 15:49:151659browse
Ordered lists are numbered, unordered lists are unnumbered, they can be created using tags
CD - This will create an unordered list marked with bullets (default).
Circles - This will create an unordered list labeled circles.
square - This will create an unordered list labeled squares.
-
None - This will create an unordered list without any tags.
grammar
The 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 of creating 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>
The following is the output of the above example program.
Example 2
Let’s look at another example of creating an unordered list using 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>
After executing the above code, the output is as follows -
The above is the detailed content of How to create an unordered list with image symbols in HTML?. For more information, please follow other related articles on the PHP Chinese website!