In this tutorial, we’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternative text to images to improve accessibility for site visitors who use screen readers.
Images are added to an HTML document using the
<img> element. The
<img> element requires the attribute
src which allows you to set the location of the file where the image is stored. An image element is written like this:
Note that the
<img> element does not use a closing
</img> tag. To try using the
<img> element, download our image of Sammy the Shark and place it in your project directory
Note: To download the image of Sammy the Shark, visit the link and
CTRL + Left Click (on Macs) or
Right Click (on Windows) on the image and select “Save Image As” and save it as
small-profile.jpeg to your project directory.
Next, erase the content of your
index.html file and paste
<img src="Image_Location"> into the file. (If you have not been following the tutorial series, you can review instructions for setting up an
index.html file in our tutorial Setting Up Your HTML Project.
Then, copy the file path of the image and replace
Image_Location with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using
CTRL + Left Click (on Macs) or
Right Click (on Windows) on the image file
small-profile.jpeg in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:
Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding
<img> elements to our document.
index.html file and reload it in your browser. You should receive something like this:
Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:
Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the
src attribute in the
However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.
When adding an image, you should always include alternative text describing its content using the
alt attribute. This text is typically not displayed on the webpage but is used by screen readers to communicate content to visually-impaired site visitors.
<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." >
When adding alternative text, keep the following best practices in mind:
For informative images, alternative text should clearly and concisely describe the subject matter of the image, without referring to the image itself. For example, do not write “Image of Sammy the Shark, DigitalOcean’s mascot” but “Sammy the Shark, DigitalOcean’s mascot.”
For decorative images, the
alt attribute should still be used but with a null value, as this improves the screen reader experience:
<img src="images/decorative_image.jpeg" alt="">.
For a useful guide on determining whether an image is informative or decorative, visit https://www.w3.org/WAI/tutorials/images/decision-tree/
You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial How To Add a Profile Image To Your Webpage later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.
If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.