Know and understand the content layer is used to enter the content and create the structure of a web page

Website Authoring – The Content Layer

1. The three‑layer model of web authoring

The Cambridge IGCSE ICT (0417) syllabus describes every web page as being built from three logical layers:

  • Presentation layer – visual style (CSS, colours, fonts, layout).

  • Content layer – the actual text, images, tables, lists and other information that the visitor reads or interacts with. This layer is written in HTML and must be free of visual styling.

  • Behaviour layer – client‑side scripts that add interactivity (JavaScript). For the IGCSE exam the behaviour layer is not required; any scripting belongs outside the content layer.

2. What the content layer does

  • Enters and organises all textual and multimedia material for a page.

  • Creates a logical, hierarchical structure using headings, sections and containers.

  • Marks up information semantically so browsers, search engines and assistive technologies can interpret it correctly.

  • Provides a stable foundation that can be styled (presentation layer) and enhanced (behaviour layer) without changing the core markup.

3. Mandatory HTML elements for the content layer (exam requirements)

These tags must appear in every IGCSE web‑page submission.

ElementPurpose / Typical UseKey attributesExample
<!DOCTYPE html>Declares the document as HTML5.–<!DOCTYPE html>
<html lang="en">Root element; specifies language for accessibility and SEO.lang<html lang="en">…</html>
<head>Container for meta‑information, page title and external links.–<head>…</head>
<meta charset="UTF-8">Specifies character encoding (mandatory for all pages).charset<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ensures correct display on mobile devices.name, content<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Brief page description">Provides a summary for search engines (SEO).name, content<meta name="description" content="Introduction to the content layer">
<meta name="keywords" content="HTML, content layer, IGCSE">List of key words for search engines (exam requirement).name, content<meta name="keywords" content="HTML, content layer, IGCSE">
<meta name="author" content="Your Name">Identifies the page author (exam requirement).name, content<meta name="author" content="John Doe">
<title>Text shown on the browser tab and in search results.–<title>Website Authoring – Content Layer</title>

4. Commonly used (optional) HTML elements for the content layer

ElementPurpose / Typical UseKey attributesExample
<link rel="stylesheet" href="styles.css">Links an external CSS file (presentation layer).rel, href<link rel="stylesheet" href="styles.css">
<header>Introductory content such as logo or site title.id, class<header id="site-header">…</header>
<nav>Primary navigation links.id, class, aria-label<nav aria-label="Main navigation">…</nav>
<main>Main content of the page (only one per page).id, class<main id="content">…</main>
<section>Groups related thematic content.id, class, aria-labelledby<section id="intro">…</section>
<article>Self‑contained composition (blog post, news item).id, class<article class="news">…</article>
<aside>Side content such as related links or adverts.id, class<aside class="sidebar">…</aside>
<footer>Closing information – copyright, contact details, sitemap.id, class<footer id="site-footer">…</footer>
<h1>–<h6>Headings that create a hierarchical outline.id, class, title<h1>Main Title</h1>
<p>Paragraph – the basic block of text.id, class<p>This is a paragraph of content.</p>
<ul> & <ol>Unordered (bulleted) and ordered (numbered) lists.id, class<ul><li>Item 1</li><li>Item 2</li></ul>
<li>List item – used inside <ul> or <ol>.id, class<li>First point</li>
<table>Organises data in rows and columns.id, class, summary<table>…</table>
<thead>, <tbody>, <tfoot>Group table header, body and footer rows for better semantics.–<thead><tr><th>Name</th></tr></thead>
<tr>, <th>, <td>Table row, header cell, data cell.scope, colspan, rowspan<tr><th scope="col">Price</th><td>$10</td></tr>
<a>Creates a hyperlink to another page or resource.href, target, rel, title, id, class<a href="https://www.example.com" target="_blank" rel="noopener" title="Visit Example">Visit Example</a>
<img>Embeds an image.src, alt, width, height, title, loading<img src="photo.jpg" alt="A mountain landscape" loading="lazy">
<figure> & <figcaption>Semantically groups an image (or other media) with a caption.id, class<figure><img src="chart.png" alt="Sales chart"><figcaption>Figure 2 – Quarterly sales</figcaption></figure>
<div>Generic container used when no semantic element fits.id, class, role<div class="grid-item">…</div>

5. Sample page – content layer in context

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introduction to the HTML content layer for IGCSE ICT">
<meta name="keywords" content="HTML, content layer, IGCSE">
<meta name="author" content="Your Name">
<title>Website Authoring – Content Layer</title>
<link rel="stylesheet" href="styles.css">   <!-- presentation layer – external CSS -->
</head>
<body>
<header id="site-header">
<h1>Website Authoring – Content Layer</h1>
</header>
<nav aria-label="Main navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="content.html">Content Layer</a></li>
<li><a href="presentation.html">Presentation Layer</a></li>
</ul>
</nav>
<main id="main-content">
<section id="intro">
<h2>What is the Content Layer?</h2>
<p>The content layer holds the text, images, tables and other information that visitors read or interact with.  It is written in HTML and should contain no visual styling.</p>
</section>
<article class="example">
<h3>Example of a simple list</h3>
<ul>
<li>Enter text</li>
<li>Add images</li>
<li>Create links</li>
</ul>
</article>
<aside class="sidebar">
<h4>Quick tip</h4>
<p>Use a single <code><h1></code> per page and follow a logical heading order.</p>
</aside>
</main>
<footer id="site-footer">
<p>© 2025 Your School – All rights reserved.</p>
</footer>
</body>
</html>

6. Linking – relative vs absolute paths

  • Absolute URL: https://www.example.com/images/photo.jpg – works from any location but ties the page to a specific domain.

  • Relative URL: images/photo.jpg – points to a file relative to the current document’s folder; easier to move a whole site between servers.

  • Exam tip: use relative paths for all internal pages, images, CSS and JavaScript files.

7. Accessibility & e‑safety

  • Alt text for every <img> – describes the image for screen‑readers and when the image cannot be displayed.

  • Descriptive link text – avoid “click here”; the link text should indicate its destination (e.g., “View the 2025 timetable”).

  • ARIA attributes (optional for IGCSE) – role, aria‑label can improve navigation for assistive technologies.

  • e‑Safety – always add rel="noopener" when using target="_blank" to prevent the new page from gaining access to the original page’s window object.

  • Never publish personal data (phone numbers, home addresses) without explicit permission.

8. Best‑practice checklist for the content layer

  1. Use semantic HTML – choose the element that best describes the meaning of the content.

  2. Include exactly one <h1> per page; follow a logical heading hierarchy (<h2>, <h3>, …).

  3. Provide alt text for all images and title attributes for links when extra clarification is needed.

  4. Write meaningful link text; avoid generic phrases such as “click here”.

  5. Separate content from presentation – do not use inline CSS or style attributes in the content layer.

  6. Validate the HTML with the W3C Markup Validation Service (or any other validator) before submission.