Be able to place appropriate content in the body section of a web page

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

Website Authoring – Placing Content in the  Section (ICT 0417)

1. The three layers of web development

  • Content layer – HTML markup that gives the page its structure and meaning (headings, paragraphs, tables, forms, media, etc.).
  • Presentation layer – CSS that controls colours, fonts, layout and visual design. In the IGCSE you only need to know how to link an external stylesheet.
  • Behaviour layer – JavaScript that adds interactivity. This layer is not examined, but you should be able to name it.

2. What must appear in the <head> section?

The Cambridge syllabus expects the following meta‑information and links:

Tag (example) Purpose (exam focus) Notes
<meta charset="UTF-8"> Defines the character encoding – required for every page.
<meta name="viewport" content="width=device-width, initial-scale=1"> Ensures the page scales correctly on mobile devices.
<meta name="description" content="Brief description of the page"> Provides a short summary for search‑engine results. Optional in the exam but useful to know.
<meta name="keywords" content="ICT, portfolio, school"> List of keywords for search engines (optional).
<meta name="author" content="Your Name"> Identifies the page’s author.
<title>Page title</title> Text shown on the browser tab and in search results. Must be inside <head>.
<link rel="stylesheet" href="css/style.css"> Links an external CSS file. Use a relative path; absolute paths (e.g. http:// or C:\) break when the site is moved.

3. Semantic HTML5 structure (content layer)

Modern HTML5 provides meaning‑ful container elements. They are part of the content layer and are examined.

  • <header> – introductory content (logo, site title, navigation).
  • <nav> – a set of navigation links.
  • <main> – the primary content of the page.
  • <section> – a thematic grouping of content.
  • <article> – self‑contained composition (blog post, news item).
  • <aside> – tangential information (sidebar, related links).
  • <footer> – closing information (copyright, contact details).

4. The <body> section – what belongs there?

Everything the user sees is placed inside <body>. Typical content includes:

  • Headings (<h1>–<h6>)
  • Paragraphs (<p>)
  • Lists – ordered (<ol>) or unordered (<ul>) with <li>
  • Tables (<table> with <thead>, <tbody>, <tr>, <th>, <td>)
  • Images (<img>) – must include alt text for accessibility
  • Audio & video (<audio>, <video>) with controls attribute
  • Hyperlinks (<a href="…">) – relative, absolute, target="_blank"
  • Bookmarks – internal links using id attributes
  • Forms (<form>, <input>, <label>, <textarea>, <select>, <button>)
  • Class and ID attributes for CSS styling (e.g., class="highlight", id="mainNav")

5. Common body elements – purpose and example

HTML element Purpose (exam focus) Example
<h2>…</h2> Main section heading (use hierarchy – h1 only once per page). <h2>Welcome to My Site</h2>
<p>…</p> Paragraph of text. <p>We provide web design and hosting services.</p>
<ul>…</ul> Unordered (bulleted) list. 
<ul>
    <li>Coding</li>
    <li>Photography</li>
    <li>Cycling</li>
</ul>
<ol>…</ol> Ordered (numbered) list. 
<ol>
    <li>Plan</li>
    <li>Design</li>
    <li>Develop</li>
</ol>
<table>…</table> Tabular data – must contain <thead> for headings and <tbody> for data rows. 
<table>
    <thead>
        <tr>
            <th>Course</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ICT 0417</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Mathematics</td>
            <td>B</td>
        </tr>
    </tbody>
</table>
<img src="…" alt="…" width="…" height="…"> Embedded image – alt text is required for accessibility. <img src="images/photo.jpg" alt="Alex playing guitar" width="300" height="200">
<audio src="…" controls></audio> Audio player – controls makes playback buttons visible. <audio src="audio/theme.mp3" controls>Your browser does not support audio.</audio>
<video src="…" controls width="…" height="…"> Video player – include controls and size attributes. <video src="video/intro.mp4" controls width="480" height="270">Your browser does not support video.</video>
<a href="URL">…</a> Hyperlink – can be relative, absolute, or open in a new tab. 
<a href="portfolio.html">My portfolio</a>
<a href="https://www.example.com">External site</a>
<a href="https://www.example.com" target="_blank">Open in new tab</a>
<a id="section1"></a> Bookmark (internal link target). 
<h2 id="contact">Contact Details</h2>
<a href="#contact">Jump to Contact</a>
<form action="process.php" method="post">…</form> Collects user input – must contain at least one input element and a submit button. 
<form action="submit.html" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="M">Male
    <input type="radio" id="female" name="gender" value="F">Female<br>

    <button type="submit">Submit</button>
</form>
class="…" id="…" Hook for CSS styling (class can be reused, id must be unique). 
<p class="highlight">Important notice</p>
<div id="mainNav">…</div>

6. Minimal HTML5 skeleton (where the <body> sits)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Brief page description">
    <meta name="keywords" content="ICT, HTML, IGCSE">
    <meta name="author" content="Your Name">
    <title>Page Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
</body>
</html>

7. Detailed examples of required body features

7.1 Table with headings, body, and spanning cells

<table border="1">
    <thead>
        <tr>
            <th colspan="2">Student Details</th>
        </tr>
        <tr>
            <th>Name</th>
            <th>Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alex Taylor</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Samira Khan</td>
            <td>B+</td>
        </tr>
    </tbody>
</table>

7.2 Image with accessibility attributes

<img src="images/logo.png" alt="School logo – blue shield with white letters" width="150" height="80">

7.3 Audio and video with controls

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

<video src="video/intro.mp4" controls width="560" height="315">
    Your browser does not support video.
</video>

7.4 Simple form (text field, radio buttons, submit)

<form action="thankyou.html" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>

    <label>Preferred contact:</label>
    <input type="radio" id="phone" name="contact" value="phone">
    <label for="phone">Phone</label>
    <input type="radio" id="emailOpt" name="contact" value="email">
    <label for="emailOpt">Email</label><br>

    <button type="submit">Send</button>
</form>

7.5 Internal bookmark and link

<h2 id="services">Our Services</h2>
...
<a href="#services">Jump to Services section</a>

7.6 Relative vs. absolute hyperlinks

<!-- Relative link – works when the site folder is moved together -->
<a href="pages/contact.html">Contact Us</a>

<!-- Absolute link – points to a specific web address -->
<a href="https://www.bbc.co.uk">BBC Home</a>

<!-- Open in a new tab -->
<a href="https://www.example.com" target="_blank">External site</a>

7.7 Using class and id for CSS (no CSS required for the exam, but you should recognise the syntax)

<p class="notice">This is an important notice.</p>
<div id="mainNav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</div>

8. Checklist for a complete <body> section (exam quick‑check)

  • All visible content is inside <body>.
  • Headings follow a logical hierarchy – only one <h1> per page, then <h2>, <h3>, …
  • Paragraphs are wrapped in <p> tags.
  • Lists use <ul> or <ol> with <li> items.
  • Tables contain <thead> for column headings and <tbody> for data rows; any spanning cells are marked with colspan or rowspan.
  • Images include an alt attribute (accessibility).
  • Audio and video elements have the controls attribute.
  • Forms contain at least one <input> or <textarea>, a corresponding <label>, and a submit button.
  • Hyperlinks have correctly formed href values; internal links use relative paths, external links may be absolute; target="_blank" is optional.
  • Any internal bookmarks use a unique id and are linked with #id.
  • Class and id attributes are used only once for an id and may be reused for class.
  • No stray tags appear outside the opening and closing <body> tags.

9. Suggested diagram (description only – draw on your revision sheet)

Layer diagram

Three stacked boxes labelled “Content layer (HTML)”, “Presentation layer (CSS)”, “Behaviour layer (JavaScript)”. The <head> box sits above the <body> box within the Content layer. An arrow points from the <link> element in the head to the external CSS file, and a separate, dotted arrow indicates the optional JavaScript file.

Create an account or Login to take a Quiz

116 views
0 improvement suggestions

Log in to suggest improvements to this note.