The Image Tag
Adding a thousand words
The <img /> Tag
To add an image to your website you will need to use the <img> tag. This tag is different than other tags, in that it has no closing tag. It is called a self-closing tag, which means that there is just a slash at the end of the opening tag (ex. <img />). There are very few self-closing tags in HTML.
There are two attributes that need to appear on each image tag, the src and alt. Both of these attributes need to be used on the <img> tag for it to validate.
<src>
The src, or source, is the location of the image file. This is usually a relative path. For instance, if you had an images folder that contained your logo image the src might be src="images/logo.png"
<alt>
The alt, or alternate description, is a description of the image that can be used as a backup if the image is not available to display. This should describe the image well enough that you would know what the image is if it was not visible. This can be written out in sentence format. Using the same logo example your alt text could be, alt="The uplift logo image."
The full <img> tag would look like this:
<img src="images/logo.png" alt="The uplift logo image" />
Activity
Here you can test out what you read, and achieve badges.
Activity Instructions
There is a folder called "images" on this website that has the following images. You are currently on "image-tag" page and the images folder is at the root of this website. This means you will need to use a ../ or just a / before the folder name to get to the correct location of the images. If you are struggling to understand folder structures you can take a look at the video and activity on the https://310.commbyui.org/activities/folder-structure/ page.
- logo.png
- bee-on-flower.jpg
Write an <img> tag for both of these. Don't forget that the image tag is a self-closing tag, and that you should use a src and alt description for every image.