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?

WBOY
WBOYforward
2023-09-06 15:49:151659browse

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.

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

    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!

  • Statement:
    This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete