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 and choose whether to open it in a new browsing context
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. It can point to the same website or a different website.

internal link

A hyperlink that points to another page within the same website. Relative paths are the usual convention for these links in this course, but an absolute URL can also point to the same website.

external link

A hyperlink that points to a different website. In this course, use an absolute URL. target="_blank" is optional and opens the destination in a new browsing context.

<img>

The image element — embeds an image in the page. It is a void element, so it has no closing tag and cannot contain content. 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 and relative paths

An internal link connects to another page within the same website. A relative path describes where the destination file is relative to the current file, without including the domain name. Relative paths are the usual convention for internal links in this course, but an absolute URL can also point to a page on the same website.

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 and absolute URLs

An external link connects to a different website. In this course, use an absolute URL — the full web address including the protocol (https://) and domain name — for an external link. Absolute URLs can also point to pages on the same website. The optional target="_blank" attribute opens the destination in a new browsing context, such as a new tab or window:

<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 a void element — it has no closing tag and cannot contain content. 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 asks the browser to display its standard playback controls, such as play, pause, and volume buttons:

<!-- 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's native playback controls are absent. The element or video poster may still be visible, and other playback mechanisms such as scripting or autoplay could apply. In this course, include controls when the user needs the browser's standard controls.

Void elements

Most HTML elements have an opening tag and a closing tag. A few are void elements — no closing tag exists for them, and they cannot contain content. Common void 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	Describing a location relative to the current file; the usual convention for internal links in this course	`images/photo.jpg`, `../index.html`
Absolute URL	Giving a complete address; required for external links in this course, but can also point within the same site	`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

Confusing link destination with address format. Internal and external describe whether the destination is on the same site or a different site. Relative and absolute describe how its address is written. An absolute URL such as href="https://mysite.com/about.html" can still be an internal link, although relative paths are the usual convention for internal links in this course.

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="".

Omitting controls when standard playback controls are required. The controls attribute asks the browser to display its native play, pause, and volume controls. Without it, those native controls are absent, although the element or poster may remain visible and scripting or autoplay could provide other playback mechanisms.

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. In this course, use an absolute URL for an external link. Add the optional target="_blank" only when the question asks for a new tab or browsing context.

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 is deliberately set from a subfolder — this is exactly the situation 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).