Images

Adding an image to a webpage is one line of HTML. Let's do it.

The `<img>` tag

<img src="photo.jpg" alt="A photo of me">

<img> is a self-closing tag — no content, no closing tag. It takes two attributes:

src — short for source. The path to the image file.
alt — short for alternative text. A description of the image. Shown if the image fails to load, and important for accessibility.

Both attributes matter. Get into the habit of always writing alt.

Using an image from your computer

Copy an image file (.jpg, .png, or .gif) into the same folder as your first.html
Use its filename as the src:

<img src="myphoto.jpg" alt="A photo of me">

Save and refresh — you will see the image on your page.

Using an image from the internet

You can also point src at a full URL:

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python logo">

Keep your own copy

Linking to images on other websites can break if the owner moves or deletes the file. For anything real, download the image and keep it in your project folder.

Controlling the size

By default an image shows at its natural size. You can control the width with an attribute:

<img src="photo.jpg" alt="A photo" width="300">

The number is in pixels. The height adjusts automatically so the image does not look squashed.

Try it in VSCode

Find any image on your computer — a photo, a logo, anything. Copy it into your project folder. Then add this to first.html:

<img src="yourfilename.jpg" alt="Describe the image here" width="400">

Replace yourfilename.jpg with the actual filename. Save and refresh.

Challenge

Add an image to your first.html. Then wrap it in an <a> tag so that clicking the image opens a link — like this:

<a href="https://www.python.org">
  <img src="yourimage.jpg" alt="Click to visit Python">
</a>

You just made a clickable image. That is nesting in action.

← Links Next: Lists →