How to Add Images to a List Using HTML Programming

Last Updated: July 7, 2022

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

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
Create list tags inside of the unordered list tags. ^{[1]
X
Research source}
- To create the list tags, add the following into the HTML text editor:
Advertisement
3
Insert the image tag inside of the list tags.
- To create the image tags, add the following into the HTML text editor:
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
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.

Method 2

Method 2 of 2:

Images Inside an Ordered List

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
Create list tags inside of the ordered list tags.
- To create the list tags, add the following into the HTML text editor: ^{[2]
  X
  Research source}
3
Insert the image tag inside of the list tags.
- To create the image tags, add the following into the HTML text editor:
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
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.