Be able to place appropriate elements in the head section of a web page including insert a page title to display in the browser, attach external stylesheets (with the correct hierarchy, using a relative file path), metatags to use the appropriate att
Placing the Correct Elements in the <head> Section
Why it matters – The <head> supplies information that browsers, search engines and assistive technologies need before any page content is rendered. Mastery of these elements is required for the Cambridge IGCSE ICT 0417 syllabus (Website Authoring – sections 21.1‑21.3) and underpins good e‑safety, accessibility and performance practice.
Learning Objectives
- Identify every element that belongs in the
<head>of a valid HTML5 document. - Explain the purpose of each element and choose appropriate attribute values for a given audience and purpose.
- Apply the cascade hierarchy when linking external style‑sheets using relative file paths.
- Evaluate design choices (number of style‑sheets, meta‑tag selection, favicon use) against criteria such as load speed, mobile friendliness and accessibility.
- Understand that no JavaScript is required for this component of the syllabus – focus is on HTML + CSS only.
1. Mandatory & Optional Head‑Section Elements (Cambridge Syllabus Alignment)
| Element | Key Attributes | Typical Value / Example | Syllabus relevance | Required / Optional |
|---|---|---|---|---|
<meta charset="UTF-8"> | charset | UTF-8 | Defines character encoding – essential for correct display of text. | Required |
<title>…</title> | none | Robotics Club – Home | Text shown on the browser tab and used by search engines. | Required |
<meta name="description" content="…"> | name, content | content="A student‑run robotics club website" | Provides a concise summary for search‑engine results (SEO). | Required |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | name, content | content="width=device-width, initial-scale=1.0" | Ensures the page scales correctly on mobile devices (responsive design). | Required |
<meta name="author" content="…"> | name, content | content="Jane Smith" | Identifies the page’s creator – supports e‑safety and attribution. | Required |
<link rel="icon" href="images/favicon.ico" type="image/x-icon"> | rel, href, type | href="images/favicon.ico" | Displays a small icon on the browser tab – improves recognisability. | Required |
<link rel="stylesheet" href="…"> | rel, href, media (optional), integrity (optional) | href="styles/base.css" | Links external CSS files; order determines cascade priority. | Required (one or more) |
<meta name="keywords" content="…"> | name, content | content="Robotics, Club, School, Projects" | Older SEO practice – optional but shows good design awareness. | Optional |
<meta name="robots" content="index, follow"> | name, content | content="index, follow" | Controls how search‑engine crawlers treat the page (useful for AO3 evaluation). | Optional |
<base target="_blank"> | target | target="_blank" | Sets a default target for hyperlinks – only needed when most links open in a new tab. | Optional |
<link rel="preload" href="fonts/opensans.woff2" as="font" type="font/woff2" crossorigin> | rel, href, as, type, crossorigin (optional) | as="font" | Hints the browser to load critical resources early – performance optimisation (AO3 optional). | Optional |
<link rel="manifest" href="site.webmanifest"> | rel, href | href="site.webmanifest" | Enables progressive‑web‑app features – advanced, optional. | Optional |
2. Ordering & Hierarchy of External Style‑Sheets
The cascade works from top‑to‑bottom: later sheets override earlier ones when selectors have equal specificity. Follow this recommended order (all links use relative paths):
- Reset / Normalise – removes browser defaults (e.g.,
reset.css). - Base layout – grid, typography, colour palette (
base.css). - Theme / Brand – colour scheme, logo styles (
theme.css). - Component‑specific – sliders, galleries, forms (
components.css). - Print stylesheet –
media="print"(print.css).
Example folder structure (the most common layout taught in the syllabus):
project/│
├─ index.html
├─ about.html
│
├─ styles/
│ ├─ reset.css
│ ├─ base.css
│ ├─ theme.css
│ ├─ components.css
│ └─ print.css
│
├─ images/
│ └─ favicon.ico
│
└─ fonts/
└─ opensans.woff2
Head markup (same for every page):
<meta charset="UTF-8"><title>Robotics Club – Home</title>
<meta name="description" content="A student‑run robotics club website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jane Smith">
<meta name="keywords" content="Robotics, Club, School, Projects">
<meta name="robots" content="index, follow">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/theme.css">
<link rel="stylesheet" href="styles/components.css">
<link rel="stylesheet" href="styles/print.css" media="print">
<!-- Optional performance hint – preload critical font -->
<link rel="preload" href="fonts/opensans.woff2" as="font"
type="font/woff2" crossorigin>
3. Linking Head Elements to Accessibility & e‑Safety
- Meta author – satisfies the syllabus requirement for e‑safety and attribution.
- Favicon – helps users with visual impairments quickly locate the site among many tabs.
- Viewport meta‑tag – a prerequisite for responsive design, which benefits users on small screens and meets WCAG AA contrast‑ratio testing.
- Secure external resources – always use
https://. Whentarget="_blank"is used (via<base>or individual links), addrel="noopener noreferrer"to protect against reverse‑tabnabbing. - Alt‑text – not a head element, but remind students to add meaningful
altattributes to every<img>in the body.
4. Practical Task – Build a Simple Club Website
Audience: prospective secondary‑school students.
Purpose: provide information about meetings, projects and contact details.
- Define the site map – Home, About, Projects, Contact.
- Create the folder structure exactly as shown in the example above.
- Write the
index.htmlhead using every required element from the table (charset, title, description, viewport, author, favicon, stylesheet links). Include optional tags only if you can justify their use in the evaluation. - Validate the page with the W3C Markup Validation Service. Explain to students that validation confirms a “well‑structured” document – a key AO3 criterion.
- Test responsiveness using the browser’s device toolbar (mobile, tablet, desktop).
- Evaluate the page against the checklist below.
Evaluation Checklist (AO3)
| Criterion | What to Look For | Mark (0‑2) |
|---|---|---|
| Correct use of head elements | All required meta‑tags, title, favicon, base (if used) and stylesheet links are present and ordered correctly. | |
| Responsive design | Viewport meta‑tag present; layout adapts without horizontal scrolling on phones. | |
| Load performance | Page loads < 2 seconds on a 3G connection; unnecessary style‑sheets are consolidated. | |
| Accessibility | Images have meaningful alt text; colour contrast ≥ 4.5:1; headings follow a logical hierarchy. | |
| e‑safety & copyright | Author meta‑tag present; external links open in new tabs with rel="noopener"; all media are properly attributed. |
5. Quick Reference – Head‑Section Cheat Sheet
| Element | Key Attributes | Typical Value | When to Use |
|---|---|---|---|
<meta charset="UTF-8"> | charset | UTF-8 | Always – must be within the first 1024 bytes. |
<title>…</title> | none | Descriptive page title | Every page – appears on the tab and in search results. |
<meta name="viewport"> | name, content | width=device-width, initial-scale=1.0 | Responsive design – mandatory for mobile. |
<meta name="description"> | name, content | Brief summary (≤ 160 chars) | SEO and search‑engine snippets. |
<meta name="keywords"> | name, content | Comma‑separated list | Older SEO practice – optional. |
<meta name="author"> | name, content | Creator’s name | E‑safety & attribution. |
<meta name="robots"> | name, content | index, follow | Control search‑engine crawling – optional but useful for AO3. |
<link rel="icon"> | rel, href, type | images/favicon.ico | Brand recognisability on tabs/bookmarks. |
<base> | target (optional href) | _blank | When most links should open in a new tab; otherwise omit. |
<link rel="stylesheet"> | rel, href, media (opt.) | styles/base.css | Attach CSS; order defines cascade. |
<link rel="preload"> | rel, href, as, type, crossorigin (opt.) | fonts/opensans.woff2 | Performance hint for critical resources – optional. |
<link rel="manifest"> | rel, href | site.webmanifest | Enable PWA features – advanced, optional. |
6. Suggested Diagram for Teacher Slides
<head> element influences the browser, search engines and users.