Published by Patrick Mutisya · 14 days ago
<head> Section of a Web PageThis note explains how to correctly add the essential elements that belong in the <head> of an HTML document for the Cambridge IGCSE ICT 0417 syllabus.
The <title> element defines the text that appears on the browser tab and is used by search engines.
<title>My First Web Page</title>Use the <link> element to attach external CSS files. The order of the links determines the cascade: styles in later files override earlier ones when selectors have equal specificity.
| Order | Element | Relative Path Example | Purpose |
|---|---|---|---|
| 1 | <link rel="stylesheet" href="styles/base.css"> | styles/base.css | Base layout and default colours |
| 2 | <link rel="stylesheet" href="styles/theme.css"> | styles/theme.css | Theme‑specific overrides (fonts, colours) |
| 3 | <link rel="stylesheet" href="styles/print.css" media="print"> | styles/print.css | Print‑only styling |
Meta tags provide information to browsers and search engines. The most frequently used meta elements are listed below.
<meta charset="UTF-8"> – defines the character encoding.<meta name="description" content="A brief description of the page"> – summary shown in search results.<meta name="keywords" content="ICT, IGCSE, website, authoring"> – list of keywords (optional for modern SEO).<meta name="author" content="John Doe"> – name of the page’s author.<meta name="viewport" content="width=device-width, initial-scale=1.0"> – controls layout on mobile devices.To set a default target for all hyperlinks on a page, use the <base> element inside the <head>. The most common value is _blank, which opens links in a new tab or window.
<base target="_blank">| Element | Required Attributes | Typical \cdot alue / Example | Notes |
|---|---|---|---|
<title> | none | My Web Page | Displayed on browser tab and in search results. |
<link> | rel, href | rel="stylesheet" href="styles/main.css" | Order matters for cascade; use relative paths. |
<meta charset> | charset | UTF-8 | Must be within the first 1024 bytes of the document. |
<meta name="description"> | name, content | content="A short page description" | Helps with SEO. |
<meta name="viewport"> | name, content | content="width=device-width, initial-scale=1.0" | Essential for responsive design. |
<base> | target | target="_blank" | Sets default link target for the whole page. |
<head> to the browser (title → tab, meta → SEO, link → CSS cascade, base → link behaviour).