Add images to ordered or unordered HTML list with these easy steps
- Unordered List |
- Ordered List |
- Video |
- Tips
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
-
1Create 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:
-
2Create 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 -
3Insert the image tag inside of the list tags.
- To create the image tags, add the following into the HTML text editor:
-
4Paste 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.
-
5If 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
-
1Create 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:
-
2Create 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
-
3Insert the image tag inside of the list tags.
- To create the image tags, add the following into the HTML text editor:
-
4Paste 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.
-
5If 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
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
Submit a Tip
All tip submissions are carefully reviewed before being published
Name
Please provide your name and last initial
Thanks for submitting a tip for review!
Advertisement
References
About This Article
Thanks to all authors for creating a page that has been read 54,765 times.
Advertisement