Put pictures on the page

01 / 05

A picture goes in with img

The tag that puts a drawing or a photo on the page is <img> — the img of image.

You write where the picture lives in the src attribute. That is the src of source.

<img src="/samples/neko.svg">

02 / 05

A tag with nothing to wrap

<img> has no closing tag, because a picture has no text to wrap.

A tag like this is called an empty element. You never write </img>, so watch out for that.

<p>This is a paragraph</p><img src="/samples/hana.svg">

03 / 05

alt says what the picture is

In the alt attribute you write, in a few words, what the picture actually shows.

It appears instead of the picture if the picture fails to load, and it is the sentence that gets read out to somebody using a screen reader. Learn it as a pair: put in a picture, write its alt.

<img src="/samples/neko.svg" alt="a drawing of a cat">

04 / 05

The pictures you can use

This course gives you these five. Write the name straight into src.

/samples/neko.svg … a cat
/samples/onigiri.svg … a rice ball
/samples/hana.svg … a flower
/samples/hon.svg … a book
/samples/ocha.svg … a cup of tea

<img src="/samples/onigiri.svg" alt="a drawing of a rice ball">

05 / 05

Mix words and pictures

Headings, paragraphs, links, pictures — that is four kinds of tag now.

Put them together and you can already make a page that is fun to look at.