WDD5 — HTML: Links, Media and Addressing

Learning intentions

Understand how to create hyperlinks using the anchor element
Know the difference between relative and absolute addressing
Know how to create internal links (same site) and external links (other websites)
Know how to embed images, audio and video in a web page
Understand the purpose and importance of the alt attribute

Success criteria

I can write a correctly structured <a> element with an href attribute to create a hyperlink
I can write relative paths to link to pages and images within the same site
I can write an absolute URL to link to an external website, opening it in a new tab
I can embed an image using <img src="..." alt="..."> with meaningful alt text
I can embed audio and video using <audio> and <video> with the controls attribute

Key vocabulary

hyperlink

A clickable element that takes the user to another page or resource. Created with the <a> element.

anchor element

The <a> HTML element used to create hyperlinks. The text between the tags becomes the clickable link text.

href

The attribute inside <a> that specifies the destination of the link. Short for Hypertext Reference.

relative path

A file path that is relative to the current page's location. Does not include a domain name. E.g. about.html or ../images/logo.png.

absolute URL

A complete web address including the protocol and domain. E.g. https://www.bbc.co.uk. Used for linking to other websites.

internal link

A hyperlink that points to another page within the same website. Uses a relative path.

external link

A hyperlink that points to a different website. Uses an absolute URL and usually opens in a new tab with target="_blank".

<img>

The image element — embeds an image in the page. Self-closing (no closing tag needed). Requires src and alt attributes.

alt attribute

Alternative text for an image. Read aloud by screen readers and shown if the image fails to load. Essential for accessibility.

<audio> / <video>

Elements that embed audio and video players. The controls attribute adds play/pause/volume controls for the user.

HTML: Links, Media and Addressing

The anchor element — creating hyperlinks

A hyperlink is a clickable element that takes users to another location — another page on the same site, or a completely different website. In HTML, hyperlinks are created with the anchor element <a>:

<a href="about.html">About us</a>

The href attribute (Hypertext Reference) holds the destination. The text between the opening and closing tags is the visible, clickable link text — it should describe where the link goes.

Internal links — relative paths

An internal link connects to another page within the same website. It uses a relative path — a path that describes where the destination file is relative to the current file. You do not need to include the domain name.

Key rules for relative paths:

about.html — file in the same folder as the current page
pages/contact.html — file in a subfolder called pages
../index.html — go up one level (to the parent folder), then find index.html
../images/logo.png — go up one level, then into the images folder

The ../ sequence means "go up one folder level". Use one ../ for each level you need to climb.

From pages/about.html, use ../ to go up one level before navigating to other folders

<!-- Internal link to a page in the same folder -->
<a href="about.html">About us</a>

<!-- Internal link from a subfolder page back to the home page -->
<a href="../index.html">Home</a>

External links — absolute URLs

An external link connects to a different website entirely. It uses an absolute URL — the full web address including the protocol (https://) and domain name. External links should almost always open in a new browser tab, using the target="_blank" attribute so users do not leave your site:

<a href="https://www.bbc.co.uk" target="_blank">Visit BBC News</a>

The image element

The <img> element embeds an image. Unlike most elements, it is self-closing — it has no closing tag. It requires two key attributes:

src — the path to the image file (relative or absolute)
alt — alternative text describing the image

<img src="images/logo.png" alt="School logo">

The alt attribute is essential for accessibility. Screen readers — used by visually impaired people — read the alt text aloud so the user understands what the image shows. If the image fails to load (e.g. the file path is wrong), the alt text is displayed in its place. Always write meaningful, descriptive alt text.

Audio and video elements

The <audio> and <video> elements embed media players. The controls attribute adds the play, pause, and volume buttons the user needs to operate the player:

<!-- Audio player -->
<audio src="sounds/intro.mp3" controls></audio>

<!-- Video player with width set -->
<video src="videos/demo.mp4" controls width="640"></video>

Without controls, the browser embeds the media but gives the user no way to play it — always include it.

Self-closing tags

Most HTML elements have an opening tag and a closing tag. A few elements are self-closing — they have no separate closing tag because they cannot contain any content. Common self-closing elements include:

<img> — image
<br> — line break
<meta> — metadata in the head

Writing <img></img> is not correct HTML5 — simply use <img> on its own.

Relative vs absolute — summary

Type	When to use	Example
Relative path	Linking to pages/images within your own site	`images/photo.jpg`, `../index.html`
Absolute URL	Linking to a different website	`https://www.bbc.co.uk`

Worked examples

Example 1 — Internal and external links

Write HTML to create (a) a link from index.html to about.html (both in the same root folder), and (b) a link to https://www.bbc.co.uk that opens in a new tab.

For the internal link, use a relative path — both files are in the same folder, so just use the filename: href="about.html".

For the external link, use the full absolute URL with https://. Add target="_blank" to open in a new tab.

Write descriptive link text — not "click here", but text that tells users where the link goes.

<!-- Internal link — same folder -->
<a href="about.html">About this site</a>

<!-- External link — opens in new tab -->
<a href="https://www.bbc.co.uk" target="_blank">Visit BBC News</a>

Example 2 — Relative paths with a folder structure

Given this folder structure, write the correct src for the image and href for the link from pages/about.html to both index.html and images/logo.png.

root/ ├── index.html ├── pages/ │ └── about.html ← you are here └── images/ └── logo.png

You are in pages/. To get to index.html (in root), go up one level: ../index.html

To get to images/logo.png (also in root), go up one level then into images: ../images/logo.png

<!-- From pages/about.html -->
<a href="../index.html">Home</a>
<img src="../images/logo.png" alt="Site logo">

Example 3 — Embedding audio, video and explaining alt text

Embed an audio file sounds/intro.mp3 and a video file videos/demo.mp4 with controls. Explain what the alt attribute does.

Use <audio> with a src pointing to the MP3 file. Add controls so the play button appears.

Use <video> with a src pointing to the MP4 file. Add controls and an optional width to size the player.

Alt text on <img> is read aloud by screen reader software used by visually impaired people — without it, they cannot know what the image shows.

<audio src="sounds/intro.mp3" controls></audio>

<video src="videos/demo.mp4" controls width="640"></video>

<!-- Alt text example -->
<img src="images/chart.png" alt="Bar chart showing sales by month">

Now you try

Given this folder structure, write the HTML for the following two tasks:

root/ ├── index.html ├── pages/ │ └── gallery.html ← you are here └── images/ └── photo.jpg

Task A: Write an <a> tag from gallery.html to index.html using a relative path.

Task B: Write an <img> tag to display photo.jpg, with suitable alt text. Use the correct relative path from gallery.html.

<!-- Task A: relative link from pages/gallery.html to index.html -->
<a href="../index.html">Back to home</a>

<!-- Task B: image from pages/gallery.html to images/photo.jpg -->
<img src="../images/photo.jpg" alt="Gallery photograph">

In both cases, ../ is needed because you are in the pages/ subfolder and need to go up one level before navigating into the correct location.

Common mistakes

Using an absolute URL for an internal link. Writing href="https://mysite.com/about.html" instead of href="about.html" makes your site fragile — if the domain changes, all links break. Use relative paths for links within your own site.

Missing the ../ when linking out of a subfolder. If your page is in pages/ and you write href="index.html", the browser looks for pages/index.html — which doesn't exist. You need href="../index.html" to go up one level first.

Omitting the alt attribute on images. An <img> without alt is inaccessible — screen readers have nothing to read. Always include alt text. If the image is purely decorative, use an empty alt: alt="".

Forgetting controls on audio and video. Without the controls attribute, the media element is embedded but invisible — users cannot play, pause, or adjust volume. Always add controls to <audio> and <video>.

Writing target="blank" instead of target="_blank". The underscore is required. Without it, the browser opens the link in a tab literally named "blank" rather than opening a new tab.

Exam tip

Relative paths are the most-tested topic in WDD. When the exam gives you a folder diagram, always identify which folder the current page is in. Count how many levels up you need to go (one ../ per level). Then navigate down to the target file. Check: does your path start from the current file's location, not from the website's root?

The exam commonly asks: "Write the HTML to display the image" or "Write an anchor element to link to the home page". Always include both required attributes — for images: src and alt. For links: href. External links also need target="_blank".

Teacher notes — Shift+T to hide

Suggested timing: This lesson spans two periods. Period 1 (1hr): warm-up, vocab, notes on links and paths (stop before audio/video). Period 2 (2hr): recap paths, cover audio/video, now you try, task set. Do not rush the folder diagram — it is where most misconceptions sit.

Key misconception — relative paths: Draw the folder tree on the board and have pupils trace the path with their finger: "I am here. I need to go here. How many levels up?" One ../ per level up. Q5 and Q10 are deliberately set from a subfolder — these are exactly the situations pupils fail in assessments.

Live demo: Create a simple two-page site in Notepad/VS Code on the projector. Show a working relative link, then break it by removing the ../ and demonstrate the 404 error. Then fix it. This makes the rule concrete.

SQA command words: "Write the HTML" (correct element, correct attribute names, correct attribute values, correct syntax), "Explain" (requires a reason, not just a definition), "Give an example" (must be a written example, not a description).