How to create an unordered list with image symbols in HTML?-HTML Tutorial-php.cn

Table of Contents

grammar

Example 2

Tutorials

Home

Web Front-end

HTML Tutorial

How to create an unordered list with image symbols in HTML?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 03:49 PM

html iconographic symbols unordered list

Ordered lists are numbered, unordered lists are unnumbered, they can be created using tags

, and tags

are used to define the items of the list. We can create 4 types of unordered lists in HTML -

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>

Copy after login

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>

Copy after login

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 id="Tutorials">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>

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn