EN

HTML・First steps

Let's show an image

Add a single photo or illustration to a text-only page. The img tag shows an image — and your page instantly comes to life.

A text-only page is lovely too, but just one photo or illustration makes it far easier to grasp and brings it to life. The tag for showing an image is <img>. There’s one thing about it that’s different from the tags so far.

How to write img

<img src="/photo.jpg" alt="A long-tailed tit relaxing by a window">
Just placing a single <img> makes one image appear.

Break it down and it looks like this.

What you writeMeaning
<img>The mark for an image. A self-contained tag
src="..."Which image to show (the image file’s location). Short for source
alt="..."The image’s description

<p> and <a> held contents in between, but <img> just says “an image here!” and places it. That’s why you don’t need </img>. Just keep in a corner of your mind that it’s a little different from the “sandwich type.”

How to write the “location” in src

In src you write where the image is, as seen from the HTML file you’re writing. If the image is in the same folder, just the file name is fine.

<img src="shima.png" alt="A photo of Shima">

If you made a folder called images and put the image inside it, you write the folder name too.

<img src="images/shima.png" alt="A photo of Shima">

Think of it as writing “the directions from where you are now.” If the folder name or the separator / is off by even one character, the browser can’t find the location.

alt (the description) is an act of kindness

alt is the text that appears in place of the image when it can’t be shown, and it’s also the text that screen-reader software, used by people who can’t see, reads aloud.

<img src="/cake.jpg" alt="A strawberry shortcake">
When an image can’t be shown, the text written in alt appears in its place.

If you write “a strawberry shortcake” in alt, then even in a situation where the image can’t be shown, what the image is still comes across. Just a few words make the page kinder to all sorts of people. That’s why alt isn’t decoration — it plays an important role.

Search engines, too, can’t read the contents of the image itself. The text you write in alt becomes the clue for what that image is. It’s an unglamorous detail, but those few words pay off in both your page’s content and its search results.

AccessibilityWriting alt text that gets acrossIf you want to know more about how to write alt, see hereTipsMake images lighter to speed up your pageFor compression tools to make photos lighter, see here

Summary of this lesson

  1. Show an image with <img src="location" alt="description">
  2. <img> holds no contents in between (no closing tag)
  3. The alt description plays an important role, kind even to those who can’t see

Try it: a photo of Shima

Let’s decorate Shima’s page with one photo. Place an <img> near the <h1>.

<img src="shima.png" alt="A photo of Shima">
<h1>Shima</h1>
<p>I'm Shima, and I love drawing and ramen. Welcome to my very first homepage!</p>

The single <img> line at the very top is what you add this time. The <h1> and <p> below it stay as they are.

Browser view. Below the round photo of Shima, a large heading “Shima” and a greeting paragraph are shown
Just one photo makes the page far livelier. You’ll tidy up the size later with CSS.

Set src to your own image file’s name, and alt to “what’s in it” in a few words. And with that, your page now has a face photo.

FAQ

What if the image doesn't show and a broken icon appears?
Almost always the cause is a mismatch in the location (path) written in src. Check that the file name's spelling, its uppercase/lowercase, and the folder where you put the image all match.
What should I write in alt?
Write, in a few words, what you want to convey to someone who can't see the image. The knack is to describe concretely what's in it, like "a strawberry shortcake."
Does the img tag need a closing tag?
No. img is a self-contained tag that holds no contents in between, so you don't write a closing tag.