Know and understand the function of an anchor

Resources → Subject Notes → Information Communication Technology ICT → Lesson Plan

Website Authoring – The <a> (Anchor) Element

Learning Objective

Know and understand the function of an anchor (<a>) in HTML web pages, how it fits into the three‑layer web‑development model, and how it meets the requirements of the Cambridge IGCSE ICT (0417) syllabus (Sections 21.1‑21.3).

1. Web‑Development Layers (Syllabus 21.1)

  • Content layer (HTML) – defines the structure and meaning of the page (headings, paragraphs, tables, multimedia, anchors, etc.).
  • Presentation layer (CSS) – controls visual appearance (colour, layout, hover effects).
  • Behaviour layer (attributes) – influences how elements act (e.g., target, rel, download). No scripting language is required for the IGCSE exam.

The anchor lives in the content layer but its appearance is set in the presentation layer and its behaviour is controlled by its attributes (behaviour layer).

2. Where an Anchor Lives in a Web Page

An HTML document is divided into two main sections:

  • Head section – meta‑information that is not displayed directly but influences browsers, search engines and the presentation layer. 
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Demo page showing anchor usage">
<meta name="keywords" content="HTML, anchor, link">
<meta name="author" content="Your Name">
<title>Anchor Demo</title>
<link rel="stylesheet" href="styles.css">
  • Body section – visible content: headings, paragraphs, tables, images, multimedia, <div> containers, and the <a> element.

All anchors are placed inside the <body>, but their visual style may be defined in the head‑linked CSS file.

3. What Is an Anchor?

An anchor creates a hyperlink that lets a user jump from one location to another. It can link to:

  • Another web page (external link)
  • A different part of the same page (internal bookmark)
  • A specific element on another page (cross‑page bookmark)
  • An email address
  • A file for download
  • An image or video (multimedia link)

4. Basic Syntax

<a href="URL" target="_blank" rel="noopener" title="Link description">Link text</a>
  • href – destination address (required).
  • target – where the linked document opens (_blank, _self, _parent, _top).
  • rel – relationship; for new‑tab external links use noopener (or noopener noreferrer) for security.
  • title – optional tooltip; improves accessibility and SEO.
  • Content between the opening and closing tags is what the user clicks (text, image, video, etc.).

5. Types of Anchors with Full Examples

  1. External link – points to a different website. 
    <a href="https://www.bbc.com" target="_blank" rel="noopener" title="BBC News – world news">BBC News</a>
  2. Internal link (bookmark on the same page) 
    <a href="#section2">Go to Section 2</a>

...

<h3 id="section2">Section 2</h3>
  3. Cross‑page bookmark – jumps to a specific element in another page. 
    <a href="chapter2.html#summary">Read the summary</a>


<h2 id="summary">Summary</h2>
  4. Email link – opens the default mail client. 
    <a href="mailto:info@example.com?subject=Enquiry">Email us</a>
  5. Download link – prompts a file download. 
    <a href="files/report.pdf" download="AnnualReport.pdf">Download Report</a>
  6. Multimedia link (image) – an image that also acts as a link. 
    <a href="gallery.html#photo5">
    <img src="thumb5.jpg" alt="View photo 5">
</a>
  7. Multimedia link (video thumbnail) 
    <a href="video.mp4">
    <img src="video-thumb.jpg" alt="Play video">
</a>

6. Anchor Attributes – Quick Reference Table

Attribute Purpose Typical Values / Example
href Destination URL or fragment identifier. https://www.example.com, #section3, chapter2.html#summary
target Where the linked document opens. _blank, _self, _parent, _top
rel Relationship between current page and linked resource. noopener, noreferrer, stylesheet, prefetch
title Tooltip / advisory information for accessibility and SEO. "Visit the official site"
download Indicates the link is for downloading a file. (empty) or "myfile.zip"
id Creates a named anchor for internal or cross‑page linking. section5
class Assigns the element to a CSS class (re‑usable styling). class="navLink"

7. Relative vs. Absolute URLs (Syllabus 21.3)

  • Absolute URL – complete address, includes protocol and domain. 
    https://www.example.com/images/photo.jpg
  • Relative URL – path is relative to the current document’s location. Using relative URLs keeps the whole site portable; if the folder is moved, the links still work without editing. 
    images/photo.jpg        
../assets/style.css      
/images/photo.jpg

8. Styling Links with CSS (Syllabus 21.3)

Links are styled in the **presentation layer**. Remember the CSS hierarchy used in the exam:

  1. External stylesheet (most powerful)
  2. Internal `