Skip to content
UNWIND Code Lab Co-funded by the European Union
Links, Images and Media
Log In

Links, Images and Media

  • 6 min reading
  • 6 min activity
0 of 4 tasks doneup to 85 XP
  1. What kind of link?15 XPTo do
  2. Which alt text helps most?10 XPTo do
  3. A link and a picture30 XPTo do
  4. Slide bug: media fixes30 XPTo do

Mission 2 starts: Open your doors. Your page opens to the world. Today: links, pictures and media.

In this lesson
  • Link to a website, to a part of the same page, to a file and to an email address.
  • Add a picture with useful alt text, a size and a caption.
  • Add video, audio and another page with controls and a title.
Remember

In Unit 1 you wrote <html lang="en">. lang="en" is an attribute: extra information in the opening tag, written as name="value".

Quick check: where does an attribute go?

Inside the opening tag, after the tag name and a space: <a href="...">. Never in the closing tag.

Links: the doors of your page

A link is an <a> tag. Its attribute href ("hypertext reference") holds the address. The link text is what people see and tap.

<a href="https://example.com">Visit the example site</a>
The link...Example
opens a websitehref="https://example.com"
jumps to the element with id="contact"href="#contact"
opens a new tabtarget="_blank"
saves a filehref="/cv.pdf" download
starts an emailhref="mailto:name@example.com"
Clear link text
  • Read my CV
  • Email me
  • Bus times (opens in a new tab)
Unclear link text
  • click here
  • here

Screen reader users often jump from link to link, so each link text must make sense alone. New tabs can confuse people: use them rarely, and say so in the link text.

Grouping

What kind of link?

Required 15 XP

Pictures with <img>

This example is from the course slides. <img> has no closing tag.

<img src="mountains.jpg" alt="Mountains at sunset"
     width="600" height="400">
src

The picture file. Required.

alt

Words that replace the picture: screen readers read them, and browsers show them when the picture cannot load.

width, height

The size in pixels. The browser keeps the space, so the text does not jump.

The slides also show title, a text that appears under a mouse. Phones and keyboards cannot show it, so important words go in the page or in alt.

Worked example: alt text in three steps
  1. Look

    What does the picture show? Mountains, an orange sky.

  2. Ask

    What does a listener need here? The place and the time of day.

  3. Write it short

    Most important part first, no "image of": alt="Mountains at sunset".

Ayla's photo of a market stall (drawn for this lesson).
Quick check

Which alt text helps most?

Required 10 XP

A picture with a caption

<figure> groups a picture with its caption, <figcaption>. Everyone sees the caption; alt replaces the picture. Both help.

<figure>
  <img src="city.jpg" alt="A city seen from a tall tower">
  <figcaption>The city from above.</figcaption>
</figure>

Your turn: answer the question, run the code, then fix it one check at a time.

Practice

A link and a picture

Required 30 XP

Lena (a fictional learner) wrote a section about her favourite place. Help her finish it: describe the picture, give it a size and a caption, and make both links clear.

Video, audio and other pages

<video width="320" height="180" controls>
  <source src="clip.mp4" type="video/mp4">
  <source src="clip.webm" type="video/webm">
  Your browser cannot play this video.
</video>
  • controls adds play, pause and volume buttons. Always add it.
  • autoplay starts alone. Avoid it: many browsers block it when there is sound. If you use it, add muted. loop repeats; preload is only a hint.
  • Each <source> is the same file in another format. The browser plays the first one it can; the text shows only if it can play none.
  • <audio controls> works the same way. For MP3 the type is audio/mpeg.
Captions help many people

People who cannot hear, or who are in a quiet place, read captions. A caption file goes into the video with <track kind="captions">.

<iframe> shows another page inside yours. Its title tells screen reader users what is inside. Nothing goes between the tags.

<iframe src="https://example.com" title="Example page"></iframe>
In this practice space

Outside pages, videos and sounds are blocked here for safety, so you see empty boxes. The checks read your code.

For the curious: <source> for pictures

The slides say <source> can also choose a picture for the screen size. That happens inside <picture>, with the attributes srcset and media.

Practice

Slide bug: media fixes

Required 30 XP

This code is built from the course slides on video, audio and frames. One line has a bug from the slides, and we hid two more. Tap a line to check it, then choose the fix.

Key words

Link
Text that takes people to another place when they tap it: <a>.
Alt text
Words that replace a picture for people who cannot see it.
Caption
A visible line that explains a picture.
Controls
The play, pause and volume buttons of a player.

In short

  • <a href="..."> makes a link; its text says where it goes.
  • <img> needs src and alt; width and height keep its space.
  • <figure> and <figcaption> give a picture a caption.
  • Video and audio need controls; an iframe needs a title.
Next time

Tables: rows, columns, a caption and cells that cover two columns.

Sources

  1. MDN Web Docs (2026). Creating links.
  2. MDN Web Docs (2026). HTML images.
  3. MDN Web Docs (2026). HTML video and audio.
  4. MDN Web Docs (2026). <video>: The Video Embed element (autoplay, preload).
  5. MDN Web Docs (2026). <iframe>: The Inline Frame element (title).
  6. W3C WAI (2024). An alt Decision Tree.
  7. W3C (2023). Understanding Success Criterion 1.4.2: Audio Control.

End of the lesson

This lesson: 0 of 95 XP

Code Cards in this lesson: 7

  • <a>
  • href="#id"
  • mailto:
  • <img>
  • <figure>
  • <video>
  • <iframe>
Next: Tables