Know and understand the purpose of the head and body sections of a web page

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

21. Website Authoring

Objective

Know and understand the purpose of the <head> and <body> sections of a web page and how they relate to the three development layers required by the Cambridge IGCSE 0417 syllabus – content, presentation and behaviour.

1. Overall structure of an HTML5 document

Every HTML5 page follows the same basic skeleton. The <head> prepares the page (metadata, links, early scripts). The <body> delivers the visible content and interactive features.

<!DOCTYPE html>
<html lang="en">
    <head>
        …metadata, links, scripts…
    </head>
    <body>
        …visible content, layout, interactive scripts…
    </body>
</html>

2. The three‑layer model

LayerPurposeTypical technology
ContentDefines the meaning and structure of information.HTML (elements in <body> and some in <head> such as <title>, <meta>)
PresentationControls appearance – colour, fonts, layout, spacing.CSS (external stylesheet, internal <style>, or inline style attribute)
BehaviourAdds interactivity and dynamic responses.JavaScript (external <script>, internal, or inline handlers)

3. The <head> – the “content” layer

3.1 Primary purpose

  • Provides information *about* the page (metadata) that is not rendered for the user.
  • Links to external resources needed before the page is displayed (stylesheets, favicons, critical scripts).
  • Sets up the environment – character encoding, viewport, base URL, etc.

3.2 Required meta‑tags (syllabus 21.2)

TagPurpose (one‑sentence description)
<meta charset="UTF-8">Specifies the character encoding; ensures all characters display correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Makes the page responsive on mobile devices.
<meta name="description" content="…">Brief summary used by search engines.
<meta name="keywords" content="HTML, CSS, IGCSE">Comma‑separated list of keywords (optional but part of the syllabus).
<meta name="author" content="Your Name">Identifies the page author.

3.3 Optional but useful head elements

  • <base href="https://www.example.com/" target="_blank"> – sets a base URL for relative links (optional).
  • <title>…</title> – appears in the browser tab and search results (must be present).
  • <link rel="icon" href="images/favicon.png" type="image/png"> – favicons for browser tabs.

3.4 Ordering of head elements (recommended)

  1. Charset meta‑tag
  2. Viewport meta‑tag
  3. Other meta‑tags (description, keywords, author)
  4. Title
  5. Base (if used)
  6. Links to external resources (stylesheets, favicons)
  7. Early scripts (with async or defer)

3.5 Linking external resources – path checklist

Path typeExampleWhen to use
Relative (same folder)href="styles.css"Files stored in the same directory as the HTML file.
Relative (sub‑folder)href="css/styles.css"Typical for organised projects.
Root‑relativehref="/assets/css/styles.css"Useful when the site may be moved to a different domain but keeps the same root structure.
Absolute (external)href="https://cdn.jsdelivr.net/npm/normalize.css"Only for third‑party CDNs; must include integrity and crossorigin for security.

3.6 Security‑focused attributes for external resources

  • integrity="sha384‑…" – Subresource Integrity (SRI) ensures the file has not been tampered with.
  • crossorigin="anonymous" – Required when using SRI with resources from another origin.
  • Example: 
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css"
              integrity="sha384‑abc123…" crossorigin="anonymous">

3.7 Complete <head> example (with comments)

<head>
    <!-- 1. Character encoding – must be first -->
    <meta charset="UTF-8">

    <!-- 2. Viewport for responsive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 3. SEO‑relevant meta data -->
    <meta name="description" content="Sample IGCSE ICT page showing head and body sections.">
    <meta name="keywords" content="HTML, CSS, JavaScript, IGCSE">
    <meta name="author" content="Your Name">

    <!-- 4. Page title – appears in the browser tab -->
    <title>IGCSE ICT – Head & Body Demo</title>

    <!-- 5. Optional base URL – sets default target for links -->
    <!-- <base href="https://www.example.com/" target="_blank"> -->

    <!-- 6. Favicon – small icon shown in tabs/bookmarks -->
    <link rel="icon" href="images/favicon.png" type="image/png">

    <!-- 7. External stylesheet – presentation layer -->
    <link rel="stylesheet" href="css/styles.css"
          integrity="sha384‑…"
          crossorigin="anonymous">

    <!-- 8. Critical JavaScript – load early but do not block rendering -->
    <script src="js/critical.js" defer></script>
</head>

4. The <body> – content, presentation and behaviour

4.1 Content layer (HTML)

All visible elements are placed here: headings, paragraphs, lists, tables, images, audio/video, forms, hyperlinks, and semantic containers such as <section>, <article>, <nav>, <header>, <footer>.

4.2 Presentation layer (CSS)

CSS can be added in three ways:

  • External stylesheet – recommended for any site larger than a single page.
  • Internal stylesheet – placed inside <style> tags (usually in the <head>) for short examples.
  • Inline style – using the style attribute on an element (use sparingly).

Example of a simple internal style block:

<style>
    body {font-family: Arial, sans-serif; line-height: 1.5;}
    h1   {color: #2A7AE2;}
    .nav {background:#f0f0f0; padding:10px;}
</style>

4.3 Behaviour layer (JavaScript)

JavaScript adds interactivity. Three placement options:

  • Inline handler – e.g. <button onclick="alert('Hi')">Click</button>
  • Internal script – inside <script> tags (commonly placed just before the closing </body> tag).
  • External script – linked with <script src="js/app.js"></script>. Use async or defer to avoid blocking rendering.

5. Required body elements (syllabus 21.2)

5.1 Headings and lists

<h1>Main title</h1>
<h2>Section heading</h2>
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

5.2 Tables – full semantic markup

<table>
    <caption>Student marks</caption>
    <colgroup>
        <col style="width:70%">
        <col style="width:30%">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td colspan="2">78 (rowspan example)</td>
        </tr>
    </tbody>
</table>

5.3 Images – accessibility requirement

<img src="images/beach.jpg" alt="Sunny beach with palm trees" width="600" height="400">

The alt attribute provides a text alternative for screen readers and for situations where the image cannot be displayed.

5.4 Audio and video

<audio controls src="media/song.mp3">Your browser does not support audio.</audio>

<video controls width="640" height="360" src="media/clip.mp4">
    Your browser does not support video.
</video>

Always include the controls attribute so users can play, pause and adjust volume.

5.5 Forms – fully accessible

<form action="submit.php" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required aria-required="true">
    </div>

    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required aria-required="true">
    </div>

    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>

    <button type="submit">Send</button>
</form>
  • Each <label> is paired with its control via for / id.
  • required and aria-required="true" indicate mandatory fields to assistive technologies.

5.6 Hyperlinks and anchors

<a href="https://www.cambridgeinternational.org" target="_blank">Cambridge International</a>
<a href="#section2">Jump to Section 2</a>

<h2 id="section2">Section 2</h2>

5.7 Semantic containers (section, article, nav, header, footer)

<header class="site-header">
    <h1>My Portfolio</h1>
    <nav>
        <a href="#about">About</a>
        <a href="#projects">Projects</a>
        <a href="#contact">Contact</a>
    </nav>
</header>

<section id="about">
    <h2>About Me</h2>
    <p>…</p>
</section>

<article>
    <h2>Project Title</h2>
    <p>Description of the project.</p>
</article>

<footer>
    <p>© 2025 Your Name. All rights reserved.</p>
</footer>

6. Accessibility & e‑Safety checklist (AO3)

Accessibility
  • Declare the page language: <html lang="en">.
  • Provide meaningful alt text for every <img>.
  • Use a logical heading hierarchy (<h1> → <h2> …).
  • Ensure colour contrast meets WCAG AA (minimum 4.5:1 for normal text).
  • Make all interactive elements keyboard‑accessible (e.g., button, a href).
  • Use native HTML elements first; add ARIA only when native semantics are insufficient.
e‑Safety
  • Host CSS, JavaScript and media files on your own server or a trusted CDN; avoid unknown third‑party scripts.
  • Include integrity and crossorigin attributes for any external resources.
  • Respect copyright – use images/audio you own or that are free‑licensed.
  • Validate all user input on the server side to prevent injection attacks.
  • Provide a clear privacy notice if personal data are collected via forms.

7. Comparison of <head> and <body>

Aspect <head> <body>
Primary role Provides metadata, links to resources and early scripts – the “content” layer. Holds visible content and interactive elements – the “presentation” and “behaviour” layers.
Visibility to the user Not rendered in the browser window. Rendered as page content.
Typical elements <title>, <meta>, <link>, <style>, early <script>, <base> (optional). All content tags – headings, paragraphs, lists, tables, images, audio/video, forms, navigation, semantic sections, and scripts that run after load.
Impact on SEO Title, description, keywords, author – influence ranking. Content relevance, heading hierarchy, semantic markup also affect ranking.
Loading order Parsed first; resources may be pre‑loaded. Parsed after the head; rendered sequentially (scripts with defer run after parsing).

8. Practical example – a complete, syllabus‑aligned page

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 1. Charset – must be first -->
    <meta charset="UTF-8">

    <!-- 2. Viewport for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 3. SEO meta data -->
    <meta name="description" content="Sample IGCSE ICT page showing head and body sections.">
    <meta name="keywords" content="HTML, CSS, JavaScript, IGCSE">
    <meta name="author" content="Your Name">

    <title>IGCSE ICT – Head & Body Demo</title>

    <!-- 4. Optional base URL (commented out) -->
    <!-- <base href="https://www.example.com/" target="_blank"> -->

    <!-- 5. Favicon -->
    <link rel="icon" href="images/favicon.png" type="image/png">

    <!-- 6. External stylesheet with SRI -->
    <link rel="stylesheet" href="css/styles.css"
          integrity="sha384‑…"
          crossorigin="anonymous">

    <!-- 7. Critical JavaScript – defer to avoid blocking -->
    <script src="js/critical.js" defer></script>
</head>

<body>
    <header class="nav">
        <h1>Welcome to My Site</h1>
        <nav>
            <a href="#section1">Home</a> |
            <a href="#section2">Gallery</a> |
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section id="section1">
        <h2>About this page</h2>
        <p>This paragraph is part of the <code><body></code> section and will be displayed in the browser.</p>
    </section>

    <section id="section2">
        <h2>Image example</h2>
        <img src="images/beach.jpg" alt="Sunny beach with palm trees" width="600">
    </section>

    <section id="contact">
        <h2>Contact us</h2>
        <form action="submit.php" method="post">
            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required aria-required="true">
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required aria-required="true">
            </div>
            <button type="submit">Send</button>
        </form>
    </section>

    <footer>
        <p>© 2025 Your Name. All rights reserved.</p>
    </footer>

    <!-- 8. Main JavaScript – placed at end of body for better performance -->
    <script src="js/app.js"></script>
</body>
</html>

9. Common mistakes to avoid

  1. Placing visible content inside the <head> – it will never be shown.
  2. Omitting the <title> tag – results in a generic browser title and harms SEO.
  3. Forgetting the character‑encoding meta tag – leads to garbled non‑ASCII text.
  4. Using absolute file paths for local resources – they break when the site is moved to a server.
  5. Loading large JavaScript files in the head without async or defer – delays page rendering.
  6. Neglecting alt text on images – reduces accessibility and SEO.
  7. Skipping semantic containers (<section>, <article>, <nav>) – makes the page harder to navigate for assistive technologies.
  8. Using inline styles excessively – makes maintenance difficult and separates presentation from content.

Create an account or Login to take a Quiz

110 views
0 improvement suggestions

Log in to suggest improvements to this note.