html · level 1 · unit 3 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Put an <img> inside an <a> to make a picture link.
Anything inside an <a> becomes clickable, even a picture. Nest the <img> between the opening and closing <a> tags, and the whole picture turns into a link.
Good says where the link goes. Words like click here tell people nothing, especially screen reader users, who often jump from link to link.
In a picture link, the alt text becomes the link text. So describe where it goes, like alt="See all our dogs".
<a href="https://example.com/dogs">
<img src="dog.svg" alt="See all our dogs">
</a>Press show my page to see it here.
Indenting the <img> by two spaces shows that it lives inside the link.
guess first
What can you click here?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p><a href="https://example.com/cakes"><img src="cake.svg" alt="Our cakes"></a> Fresh every day.</p>your turn
Your turn. Make a picture link.
Put an <img> inside the link on line 2. Use ball.svg, and write alt text that says where the link goes.
Press show my page to see it here.
- a ball picture sits inside the linknot checked yet
- the picture has alt textnot checked yet
fix it
Click here? Make the link say where it goes.
Press show my page to see it here.
- the link text is not click herenot checked yet
- the link text says where it goesnot checked yet
- Imagine hearing only the link: click here. Where would it take you?
- Good link text says where the link goes. This one leads to the opening times.
- Make opening times the words inside the
<a>, and take out click here.
nailed it
your links say where they go. :D
- Put an
<img>inside<a>for a picture link. - Link text should say where the link goes.
- Avoid link text like click here.
new words in your collection
- link text
This lesson isn’t saved. A free account remembers every lesson you finish.