Know and understand the function of metatags including to define the charset, keywords for search engines, the author of the web page, a description of the web page, the viewport (to make your web page display on all devices)

Website Authoring – Metatags (IGCSE 0417)

1. The three web‑development layers

  • Content layer – HTML elements that give the page its structure and meaning.

  • Presentation layer – CSS that controls colour, layout, fonts, borders, etc.

  • Behaviour layer – JavaScript that adds interactivity. Not examined in the IGCSE, but you should recognise its purpose.

2. Required elements for a valid HTML5 page

  1. <!DOCTYPE html> – declares HTML5.

  2. <html lang="en"> – language attribute (replace en with the appropriate code).

  3. <head> must contain:

    • <meta charset="UTF-8"> – first meta tag.

    • <title>…</title> – mandatory, appears in the browser tab and search results.

    • Meta tags in the order required by the syllabus (see table below).

  4. <body> – contains the content layer elements.

3. Metatag syntax (required for the exam)

MetatagAttribute(s)PurposeTypical value
CharsetcharsetDefines the character encoding used by the document.UTF-8
Keywordsname="keywords" contentComma‑separated list of terms that describe the page (used by some search engines)."ICT, web design, metatags"
Authorname="author" contentIdentifies the creator of the page."Jane Smith"
Descriptionname="description" contentShort, human‑readable summary (shown in search‑engine snippets). Keep < 160 characters."An introduction to metatags for IGCSE ICT."
Viewportname="viewport" contentControls layout on mobile devices; essential for responsive design.width=device-width, initial-scale=1.0
X‑UA‑Compatible (optional)http-equiv="X-UA-Compatible" contentEnsures Internet Explorer uses the latest rendering engine.IE=edge
Robots (optional)name="robots" contentGuides search‑engine crawling behaviour.index,follow

4. Example of a complete <head> section

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">                                   <!-- 1️⃣ charset – first! -->
<title>My IGCSE ICT Project</title>                     <!-- mandatory title -->
<meta name="keywords" content="ICT, IGCSE, metatags, HTML">
<meta name="author" content="Alex Johnson">
<meta name="description" content="A student project demonstrating the use of metatags in HTML.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">   <!-- optional -->
<meta name="robots" content="index,follow">            <!-- optional -->
<link rel="stylesheet" href="css/styles.css">           <!-- presentation layer -->
</head>

5. Content layer – semantic HTML5 elements and common tags

All of the following can appear inside the <body> of the page.

<body>
<header>
<h1 id="pageTitle">Metatag Demonstration</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<main>
<section>
<h2>Simple Table</h2>
<table class="dataTable">
<thead>
<tr><th>Item</th><th>Quantity</th></tr>
</thead>
<tbody>
<tr><td>Pens</td><td>10</td></tr>
<tr><td>Notebooks</td><td>5</td></tr>
</tbody>
</table>
</section>
<section>
<h2>Image with proper alt text</h2>
<img src="images/logo.png" alt="School logo – blue‑white emblem" width="150">
</section>
<section>
<h2>Styled box (presentation layer)</h2>
<div class="infoBox">
<p>This box is styled with the .infoBox class in styles.css.</p>
</div>
</section>
</main>
<footer>
<p>© 2026 Alex Johnson. All rights reserved.</p>
</footer>
</body>

Key HTML elements covered

  • Headings <h1>–<h6>

  • Paragraphs <p>

  • Lists <ul>, <ol>, <li>

  • Links <a href="…"> (internal & external)

  • Images <img src="…" alt="…">

  • Tables <table> with <thead>, <tbody>, <tr>, <th>, <td>

  • Semantic containers: <header>, <nav>, <main>, <section>, <footer>

6. Presentation layer – CSS basics

Cascade hierarchy (one‑sentence rule)

Browser defaults → external stylesheet → internal <style> block → inline style; later rules override earlier ones when specificity is equal.

Selectors & specificity (exam‑relevant summary)

  • Element selector – e.g. p { … }

  • Class selector – prefixed with a dot, reusable: .highlight { … }

  • ID selector – prefixed with a hash, unique per page: #mainHeader { … }

  • Specificity order: ID > Class > Element. When two rules have the same specificity, the one that appears later wins.

Example styles.css (including a table‑specific property)

.infoBox {
border: 2px solid #0066cc;
padding: 10px;
background-color: #f0f8ff;
}
#pageTitle {
color: #003366;
text-align: center;
}
.dataTable {
width: 100%;
border-collapse: collapse;          /* makes borders appear as a single line */
}
.dataTable th,
.dataTable td {
border: 1px solid #999;
padding: 6px;
text-align: left;
}

7. Relative vs. absolute paths

  • Relative – changes with the file’s location, e.g. href="css/styles.css" or src="../images/logo.png".

  • Absolute – full URL, e.g. href="https://www.example.com/css/styles.css".

8. Validation, accessibility & best practice reminders

  • Run your page through the W3C Markup Validation Service (copy‑paste the HTML or upload the file).

  • Always provide meaningful alt text for every <img> – it is part of the accessibility criteria.

  • Use semantic HTML5 elements where possible; they improve accessibility and SEO.

  • Keep the description under 160 characters and avoid “keyword stuffing”.

  • Update the author tag if a different person makes a substantial edit.

  • Include the viewport tag on every page that must be mobile‑friendly.

9. Exam‑style checklist (what the examiner expects for sections 20‑21)

  • ✅ Declare <!DOCTYPE html> and <html lang="…">.

  • ✅ Include a <title> element inside <head>.

  • ✅ Place <meta charset="UTF-8"> as the first meta tag.

  • ✅ Add the required meta tags in the correct order: keywords, author, description, viewport.

  • ✅ Use at least one semantic container (<header>, <nav>, <main>, <section>, <footer>).

  • ✅ Insert a table with a header row (<thead>).

  • ✅ Provide a hyperlink to an external site and a bookmark link to an internal section.

  • ✅ Include an image with a correct src and a meaningful alt attribute.

  • ✅ Apply a class to a <div> and style it via an external stylesheet.

  • ✅ Use relative paths for all internal files (CSS, images, other pages).

  • ✅ Validate the final HTML and correct any errors shown by the W3C validator.

10. Summary of best practices

  1. Declare <meta charset="UTF-8"> first.

  2. Always include a <title> element.

  3. Keep the description under 160 characters.

  4. Use specific, relevant keywords; avoid over‑stuffing.

  5. Update the author tag when the page is substantially edited.

  6. Include the viewport tag on every mobile‑friendly page.

  7. Link CSS with <link rel="stylesheet">; prefer class selectors for reusable styles.

  8. Prefer relative paths for files within the same project folder.

  9. Validate your HTML regularly and fix any accessibility issues (e.g., missing alt text).

  10. Remember the three layers – content (HTML), presentation (CSS), behaviour (JavaScript – not examined).

Following these notes will ensure you meet all Cambridge IGCSE 0417 requirements for sections 20‑21, produce pages that are searchable, responsive, and accessible, and give you a solid foundation for the practical exam.