How to Add Images to a List Using HTML Programming

Download Article

Add images to ordered or unordered HTML list with these easy steps

Author Info

Last Updated: December 23, 2024

Download Article

• Unordered List
|
• Ordered List
|
• Video
|
• Tips

|Show more |Show less

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.

Adding Images to HTML Lists: Quick Steps

Create an unordered or ordered list with list items. Then, use <img> src=" " alt=" "> within each list item to add an image. Copy the path of the desired image into src=" " to complete.

Steps

Method 1

Method 1 of 2:

Adding Images Inside an Unordered List

Download Article

1. 1
   Create the unordered list.

   

   • 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.

   

   • 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.

   

   • 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.
Advertisement

Method 2

Method 2 of 2:

Adding Images Inside an Ordered List

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:
     
2. 2
   Create list tags inside of the ordered list tags.

   

   • To create the list tags, add the following into the HTML text editor:
3. 3
   Insert the image tag inside of the list tags.

   

   • 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.
Advertisement

Expert Q&A

Search

Add New Question

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