How to Add Images to a List Using HTML Programming

Download Article
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

Download Article
  1. 1
    Create the unordered list.
    UnorderedListPart1.png
    {"smallUrl":"https:\/\/www.wikihow.com\/images\/0\/08\/UnorderedListPart1.png","bigUrl":"\/images\/thumb\/0\/08\/UnorderedListPart1.png\/369px-UnorderedListPart1.png","smallWidth":460,"smallHeight":92,"bigWidth":369,"bigHeight":74,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • 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
    {"smallUrl":"https:\/\/www.wikihow.com\/images\/1\/1d\/UnorderdListWithItems.png","bigUrl":"\/images\/thumb\/1\/1d\/UnorderdListWithItems.png\/373px-UnorderdListWithItems.png","smallWidth":460,"smallHeight":226,"bigWidth":373,"bigHeight":183,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • 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
    {"smallUrl":"https:\/\/www.wikihow.com\/images\/2\/23\/UnorderedListWithImageTags.png","bigUrl":"\/images\/thumb\/2\/23\/UnorderedListWithImageTags.png\/385px-UnorderedListWithImageTags.png","smallWidth":460,"smallHeight":390,"bigWidth":385,"bigHeight":326,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • To create the image tags, add the following into the HTML text editor:
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/Unorderedlistwithimages.png\/460px-Unorderedlistwithimages.png","bigUrl":"\/images\/thumb\/0\/0c\/Unorderedlistwithimages.png\/689px-Unorderedlistwithimages.png","smallWidth":460,"smallHeight":216,"bigWidth":689,"bigHeight":324,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/UnorderedListMultipleImages.png\/460px-UnorderedListMultipleImages.png","bigUrl":"\/images\/thumb\/9\/98\/UnorderedListMultipleImages.png\/696px-UnorderedListMultipleImages.png","smallWidth":460,"smallHeight":264,"bigWidth":696,"bigHeight":399,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    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

Download Article
  1. 1
    Create the ordered list.
  2. 2
    Create list tags inside of the ordered list tags.
    OrderedListWithListTags.png
    {"smallUrl":"https:\/\/www.wikihow.com\/images\/a\/a9\/OrderedListWithListTags.png","bigUrl":"\/images\/thumb\/a\/a9\/OrderedListWithListTags.png\/344px-OrderedListWithListTags.png","smallWidth":460,"smallHeight":247,"bigWidth":344,"bigHeight":185,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • 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
    {"smallUrl":"https:\/\/www.wikihow.com\/images\/7\/7e\/Orderedlistwithimagetags.png","bigUrl":"\/images\/thumb\/7\/7e\/Orderedlistwithimagetags.png\/375px-Orderedlistwithimagetags.png","smallWidth":460,"smallHeight":404,"bigWidth":375,"bigHeight":329,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    • To create the image tags, add the following into the HTML text editor:
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Orderedlistwithimages.png\/460px-Orderedlistwithimages.png","bigUrl":"\/images\/thumb\/e\/e6\/Orderedlistwithimages.png\/659px-Orderedlistwithimages.png","smallWidth":460,"smallHeight":225,"bigWidth":659,"bigHeight":322,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/43\/OrderedListMultipleImages.png\/460px-OrderedListMultipleImages.png","bigUrl":"\/images\/thumb\/4\/43\/OrderedListMultipleImages.png\/697px-OrderedListMultipleImages.png","smallWidth":460,"smallHeight":261,"bigWidth":697,"bigHeight":395,"licensing":"<div class=\"mw-parser-output\"><p>License: <a target=\"_blank\" rel=\"nofollow noreferrer noopener\" class=\"external text\" href=\"https:\/\/en.wikipedia.org\/wiki\/Fair_use\">Fair Use<\/a> (screenshot)<br>\n<\/p><\/div>"}
    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

      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
      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Submit
      Thanks for submitting a tip for review!
      Advertisement

      You Might Also Like

      How to
      Become a Hacker
      How to Find Deleted Texts on Your Husband's Phone
      How to Save a WEBP Image as a JPG: Step-by-Step Guide
      How Figma Designers Can Access & Add New Fonts
      How to
      Check if Your Gmail Account Has Been Hacked
      How to
      Insert an Image Into a Shape on Adobe Illustrator
      4 Easy Ways to Transfer Photos from iPhone to Android
      8 Easy Ways to Pin and Unpin a Text Message
      A Simple Guide to Using Codes to Access Netflix's Secret Menus
      How to
      Beat the Hackthissite.org Basic Missions
      How to Build a Hackintosh With macOS on PC
      3 Easy Ways to Find the Name of Your Computer
      How to Clear Twitter Cache on Android, iPhone & iPad
      Bookmarking All Tabs in Chrome, Edge, Firefox, and Safari
      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 46,100 times.

      Is this article up to date?

      Advertisement