Cambridge Syllabus Notes

Website Authoring: Creating the Content Layer

What is the Content Layer?

Think of a web page like a stage play. The content layer is the script – the words, images, and links that tell the story. It sits on top of the structure layer (HTML tags) and the style layer (CSS). In this section we’ll learn how to write that script using plain text, headings, lists, tables, and more.

Key HTML Elements for Content

<p> – Paragraphs: the main body of text.
<h1>–<h6> – Headings: organise information into sections.
<ul> / <ol> – Unordered & ordered lists: bullet points or numbered steps.
<table> – Organise data into rows and columns.
<a> – Hyperlinks: connect to other pages.
<img> – Images (not used in this note but important for content).
<blockquote> – Highlight quotes.
<strong> / <em> – Emphasise important words.

Creating a Simple Web Page

Start with a heading: <h1>My First Web Page</h1>
Add a paragraph: <p>Welcome to my website!</p>
Insert a list of hobbies: <ul><li>Reading</li><li>Coding</li><li>Gaming</li></ul>
Include a link to your favourite site: <a href="https://www.example.com">Visit Example</a>

Exam Tip: When writing content, remember the “5 Ws” – Who, What, When, Where, Why. They help you create clear, informative paragraphs that examiners love.

Using Tables for Structured Data

Tables are great for comparing information. Below is a simple example:

Fruit	Color	Taste
Apple	Red	Sweet
Lemon	Yellow	Sour

Exam Tip: When using tables, always include <thead> for headers and <tbody> for data. This shows you understand semantic structure.

Formatting Text for Impact

<strong>Important</strong> – Bold for emphasis.
<em>emphasised</em> – Italic for nuance.
<blockquote>Quote</blockquote> – Pull out quotes.
Use emojis to add personality: 😄 🎉 🚀

Exam Tip: Avoid over‑formatting. Use <strong> and <em> sparingly to keep the page readable.

Accessibility Check

Make sure your content is accessible to all users:

Use <alt> text for images (even if not shown here).
Keep paragraphs short – one idea per paragraph.
Use headings in order (<h1> → <h2> → <h3>).
Provide link text that describes the destination, not just “click here”.

Exam Tip: The exam may ask you to improve accessibility of a given page. Practice rewriting link texts and adding alt attributes.

Practice Exercise

Create a mini web page about your favourite sport. Use:

A main heading (<h1>)
A paragraph describing the sport
A list of rules or equipment
A small table comparing two teams or players
A link to a related video or article

Exam Tip: When you write your answer, remember to label each section clearly. Use <h2> for the title, <h3> for sub‑topics, and keep your code tidy.

Be able to create the content layer of a web page