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

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 elementPurpose (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.