To add images to a webpage, use the HTML image element:

<img src="https://content.codecademy.com/projects/make-a-website/lesson-1/bikes1.jpg"/>

Just like websites have URLs, images on the web also have URLs. Image URLs typically end with the .jpg or .png file extension. The src attribute sets the source for an image element.

Image elements are self-closing, which means they do not need a closing tag.

Let’s use an image element to add a photograph to our webpage.



In index.html, on the line below the paragraph element, add an image element. Use the following as the image URL:


Remember, the URL must be enclosed in quotes!

Run your code to view the image in the web browser.


Want to change the photo that the image element displays? Simply set the value of src to a different photo’s URL.

Here’s another photo:


Replace the current photo with this one and then run your code.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?