Links & Pictures

The idea

An <a> tag is like a signpost pointing down a trail - href is which trail it points to. An <img> tag is like a framed photo hung on the wall - src is which photo goes in the frame, alt is the little caption underneath it.

What it actually is

A link (<a href="...">) lets a visitor click through to another page. An image (<img src="..." alt="...">) shows a picture right on the page. Both need to point somewhere - href for a link's destination, src for an image's picture file.

How you write it

<a href="https://example.com">Click here</a>
<img src="picture.jpg" alt="A description of the picture">

A worked example

<p>Check out my favorite site:</p>
<a href="https://www.nasa.gov">NASA</a>
<img src="rocket.jpg" alt="A rocket launching">

The <a> tag's href points to the address the link goes to when clicked, and the text between <a> and </a> ("NASA") is what's actually clickable. The <img> tag's src points to the picture file, and alt describes the picture in words - read aloud by screen readers, and shown if the picture fails to load.

<p>My favorite game:</p>
<a href="https://www.minecraft.net">Minecraft</a>
<img src="dragon.jpg" alt="An ender dragon">

Same two tags, a new destination and picture - href always points to where a link goes, and src always points to which picture an image shows.

Mistakes children actually make

1. Forgetting the alt attribute on <img> - without it, a visitor using a screen reader (or anyone, if the picture fails to load) has no idea what the picture was supposed to be.
2. Leaving off "https://" at the start of an href pointing to another website - without it, the browser may treat the address as a page on your OWN site instead of the real destination.
3. Leaving an <a> tag completely empty, like <a href="..."></a> with nothing between the tags - the link has somewhere to go, but nothing visible or clickable for a visitor to actually click on.

Then they try it

In the app this lesson continues with the animated explanation, spoken aloud, and then the practice: Add a link (<a href="...">) with some visible text, right after the paragraph. The editor runs your child’s real code and checks the result, with their coding buddy reacting to what they wrote.