How to Add Images to a List Using HTML Programming

PDF download Download Article
PDF download Download Article

Lists are oftentimes used for text; however, it is also possible to add images to a list. To learn how to add photos to a list in HTML programming, follow the steps below.

Method 1
Method 1 of 2:

Images Inside an Unordered List

PDF download Download Article
  1. 1
    Create the unordered list.
    UnorderedListPart1.png
    • The ul element is what groups list elements together in an unordered fashion. To create the ul element, add the following into the HTML text editor:
  2. 2
    Create list tags inside of the unordered list tags. [1]
    UnorderdListWithItems.png
    • To create the list tags, add the following into the HTML text editor:
    Advertisement
  3. 3
    Insert the image tag inside of the list tags.
    UnorderedListWithImageTags.png
    • To create the image tags, add the following into the HTML text editor:
  4. 4
    Paste the path of the desired image into the src="".
    • The image tags require information about the desired image in order to display it. Copy the file path for the desired image and then paste the path into the src="" like in the image.
  5. 5
    If multiple images per list item is desired, duplicate the image tag.
    • It is possible to have multiple images in each list item. In order to do so, add the text like in the image.
    6. Advertisement
Method 2
Method 2 of 2:

Images Inside an Ordered List

PDF download Download Article
  1. 1
    Create the ordered list.
    • The ol element is what groups list elements together numerically. To create the ol element, add the following into the HTML text editor:
      Orderedlist.png
  2. 2
    Create list tags inside of the ordered list tags.
    OrderedListWithListTags.png
    • To create the list tags, add the following into the HTML text editor: [2]
  3. 3
    Insert the image tag inside of the list tags.
    Orderedlistwithimagetags.png
    • To create the image tags, add the following into the HTML text editor:
  4. 4
    Paste the path of the desired image into the src="".
    • The image tags require information about the desired image in order to display it. Copy the file path for the desired image and then paste the path into the src="" like in the image.
  5. 5
    If multiple images per list item is desired, duplicate the image tag.
    • It is possible to have multiple images in each list item. In order to do so, add the text from the image into the editor.
    6. Advertisement

Expert Q&A

Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Video

      Tips

      • Add information about the picture into alt="". This will allow users who do not see the images information that they would otherwise not be able to obtain.
        Thanks
        Helpful 0 Not Helpful 0
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Become a Hacker
      A Simple Guide to Using Codes to Access Netflix's Secret Menus
      How to
      Save a WEBP Image as a JPG: Step-by-Step Guide
      How to
      Fix Alt + Tab Not Working on Windows
      2 Easy Ways to Add the Flashlight to Your Lock Screen
      How to
      Insert an Image Into a Shape on Adobe Illustrator
      How to
      Find Deleted Texts on Your Husband's Phone
      How to
      Know If Your Gmail Has Been Hacked (& Secure Your Account)
      4 Easy Ways to Transfer Photos from iPhone to Android
      How Figma Designers Can Access & Add New Fonts
      Bookmarking All Tabs in Chrome, Edge, Firefox, and Safari
      How to
      Clear Twitter Cache on Android, iPhone & iPad
      8 Easy Ways to Pin and Unpin a Text Message
      How to
      Make a Hackintosh in a Virtualbox
      Advertisement

      References

      1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
      2. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

      About This Article

      Thanks to all authors for creating a page that has been read 53,979 times.

      Is this article up to date?

      Advertisement