Why is "Mixing styling into HTML instead of using CSS." a common mistake in Web authoring?

Why it happens: Inline styling feels quicker. How to avoid it: Keep STRUCTURE (HTML) and PRESENTATION (CSS) separate; use an external stylesheet for consistency and easy editing. Source: Edexcel 4IT1 examiner reports.

Why is "Omitting alt text on images." a common mistake in Web authoring?

Why it happens: Forgetting accessibility. How to avoid it: Always add descriptive alt text — needed for screen readers and when images fail to load. Source: Edexcel 4IT1 examiner reports.

Why is "Using huge unoptimised images." a common mistake in Web authoring?

Why it happens: Uploading originals. How to avoid it: Compress/resize images — they dominate page weight and slow loading, especially on mobile.

Why is "Inconsistent or broken navigation." a common mistake in Web authoring?

Why it happens: Building pages separately. How to avoid it: Use the SAME navigation bar on every page and test all links work.

Why is "Using 'click here' as link text." a common mistake in Web authoring?

Why it happens: Habit. How to avoid it: Use descriptive link text ('Download menu') — better for usability, accessibility and SEO.

Software SkillsPearson Edexcel IGCSE ICT 4IT1

Web authoring

Work through the notes, try the practice questions, then take the quiz. The report tells you exactly what to revise next.

Previous Next

Learn this Topic

Start with the slides for the quick version, then go deeper with the full study notes.

Short Study Notes in the form of Slides

Read the notes first. If the method in a worked example clicks, you're ready for the questions.

Short Study Notes — Web authoring

Start with these resources to cover the key concepts, then work through the practice questions.

Page 1 / 0

Detailed Notes

Full prose, callouts and a recap — built for A* mastery, not just a quick scan.

Take these study notes with you

Download a branded PDF — full prose, callouts, recap and memorise list for Web authoring, ready to print or save offline.

Web Authoring Software — Edexcel IGCSE ICT (4IT1) Detailed Notes

Creating web pages and sites: HTML structure, CSS styling, hyperlinks and navigation, images and media, WYSIWYG vs code, accessibility and responsive design.

What you’ll learn

Mapped to the Pearson Edexcel IGCSE 4IT1 syllabus (2026 onwards).

Use HTML tags to structure a page.
Use CSS to style pages consistently.
Create hyperlinks and consistent navigation.
Insert and optimise images and media.
Compare WYSIWYG editors with hand-coding.
Design accessible, responsive, fit-for-purpose sites.

HTML — structure and content

Tags define what content is.

HTML (HyperText Markup Language) defines the STRUCTURE and CONTENT of a page using tags.

Common tags:

Headings: <h1> (most important) to <h6>.
Paragraph: <p>.
Hyperlink: <a href="...">link text</a>.
Image: <img src="..." alt="..."> — needs src (file) and alt (description).
Lists: <ul>/<ol> with <li> items.
Table: <table>, <tr> (row), <td> (cell).
Containers: <div>, <header>, <nav>, <footer> for layout structure.
Forms: <form>, <input> for user data entry.

Tags usually come in pairs: an opening tag and a closing tag (</p>).

Key idea: HTML describes WHAT content is (a heading, a paragraph, a link) — not how it looks. Looks are CSS's job.

CSS — presentation

Control appearance, ideally in one file.

CSS (Cascading Style Sheets) controls PRESENTATION — colours, fonts, spacing and layout.

Common properties:

color — text colour.
background-color — background.
font-family / font-size — typeface and size.
margin — space outside an element; padding — space inside.
text-align — alignment.
width / height — sizing.

Three ways to apply CSS: inline (in a tag), internal (in <head>), and external (a separate .css file linked to every page).

Use an external stylesheet — it gives CONSISTENT styling across the whole site, and editing it once updates EVERY page. This is the professional approach.

Separation of concerns: keeping HTML (structure) and CSS (presentation) separate makes sites easier to maintain and more accessible.

Hyperlinks and navigation

Connecting pages clearly and consistently.

Hyperlink (<a href="...">) — a clickable link to another page, an external site, an email, or a position on the page (anchor).

URL (Uniform Resource Locator) — the unique address of a web page.

Navigation:

A navigation bar/menu lets users move around the site.
It should be CONSISTENT — the same nav on every page.
A clickable logo usually returns to the homepage.
Use descriptive link text ('Download menu') not 'click here' — better usability, accessibility and SEO.

Site structure: plan a SITE MAP (which pages exist and how they link). Most small sites use a flat structure where every page links to all others.

Test all links — broken navigation is a common, easily-avoided fault.

Media and performance

Add visuals without slowing the site.

Images and media: insert with <img> (plus alt text), and embed video/audio or maps where useful.

Performance — images dominate page weight:

Optimise/compress images (e.g., JPG for photos, PNG for graphics, SVG for icons, WebP for efficiency).
Resize images to the size actually displayed.
This dramatically cuts load time, especially on mobile/slow connections.

Estimating load time: page size = HTML + CSS + JS + media. Download time (s) ≈ size (MB) × 8 ÷ speed (Mbps), since 1 byte = 8 bits.

Why it matters: fast pages improve user experience, retention and SEO. Compressing images is usually the single biggest speed win.

Authoring tools and accessibility

Choose the right tool; design for everyone.

Authoring approaches:

WYSIWYG builders (Wix, Squarespace) — drag-and-drop, no code, templates, hosting included; fast but less control and possible lock-in. Best for non-technical users.
CMS (WordPress) — flexible, plugins, templates; some technical skill helpful.
Hand-coding (HTML/CSS) — full control, clean code, no lock-in; requires skills and own hosting.

Choose by SKILLS, TIME, BUDGET and CONTROL needed.

Accessibility (designing for all users):

Alt text on images (screen readers).
High colour contrast and resizable text (low vision).
Keyboard navigation and large clickable targets (motor difficulties).
Logical heading structure for screen-reader navigation.
Responsive design for all devices.

Why accessibility matters: it's a legal/ethical requirement, widens the audience, and improves usability (and SEO) for everyone.

How it’s examined

Paper 1: Identify web technologies/tags (4–6 marks); explain HTML vs CSS (4 marks); compare WYSIWYG vs hand-coding (6–8 marks); explain accessibility features (6 marks); web-performance calculations (4–5 marks).

Paper 2 (practical): Create web pages — structure with HTML, style with CSS, add links, navigation, images and forms; ensure consistency and accessibility.

Frequent stems: 'State the purpose of the <…> tag…', 'Explain the difference between HTML and CSS…', 'Evaluate WYSIWYG vs hand-coding…', 'Describe two accessibility features…'

Sources: Pearson Edexcel International GCSE in Information and Communication Technology (4IT1) Specification — Issue 3; Edexcel 4IT1 Examiner Reports (2022–2024). Last reviewed 2026-05-20.

Master this Topic

Worked examples, formulae, definitions and the mistakes examiners flag — everything you need to push from a pass to an A*.

Take this whole topic with you

Download a branded revision sheet — worked examples, formulae, definitions and common mistakes for Web authoring, ready to print or save as PDF.

Step-by-step worked examples — Web authoring

Step-by-step solutions to past-paper-style questions on web authoring, written exactly the way a tutor would explain them at the board.

1Identify the web element/technology
Getting started• Edexcel 4IT1 style — short-answer (6 marks)• web-tech, AO1
Question
Name the element or technology: (a) Defines the structure and content of a page. (b) Controls the appearance (colours, fonts, layout). (c) A clickable link to another page. (d) Lets users move around the site. (e) Adds behaviour/interactivity in the browser. (f) The unique address of a web page.
Step-by-step solution
1. Step 1
  Match each description to the web technology.
Answer
(a) HTML.

(b) CSS.

(c) Hyperlink.

(d) Navigation (menu/bar).

(e) JavaScript.

(f) URL.
Examiner tip
HTML = structure/content; CSS = presentation; JavaScript = behaviour. Keeping these three separate is a key web concept.
2Identify the purpose of each HTML tag
Building confidence• Edexcel 4IT1 style — short-answer (6 marks)• html, AO1
Question
State what each tag does: (a) <h1>. (b) <p>. (c) <a>. (d) <img>. (e) <ul> / <li>. (f) <table>.
Step-by-step solution
1. Step 1
  Recall the role of each standard HTML tag.
Answer
(a) <h1> — top-level heading.

(b) <p> — paragraph of text.

(c) <a> — anchor / hyperlink.

(d) <img> — inserts an image.

(e) <ul>/<li> — unordered (bulleted) list and list items.

(f) <table> — table of rows and columns.
Examiner tip
Know common tags: headings <h1>–<h6>, <p>, <a href>, <img src>, <ul>/<ol>/<li>, <table>, <div>. The <img> tag needs src and alt.
3Identify the CSS property for each effect
Building confidence• Edexcel 4IT1 style — short-answer (5 marks)• css, AO1
Question
Name the CSS property: (a) Set the text colour. (b) Set the background colour. (c) Set the text size. (d) Set space inside an element's border. (e) Centre text.
Step-by-step solution
1. Step 1
  Recall common CSS properties.
Answer
(a) color.

(b) background-color.

(c) font-size.

(d) padding.

(e) text-align: center.
Examiner tip
CSS controls presentation. Common properties: color, background-color, font-family, font-size, margin, padding, text-align, width.
4Calculate page load time
Building confidence• Edexcel 4IT1 style — calculation (5 marks)• performance, AO2
Question
A web page contains: HTML 50 KB, CSS 30 KB, and 4 images of 600 KB each. The connection speed is 8 megabits per second (Mbps). Calculate: (a) Total page size in KB and MB (1 MB = 1,024 KB). (b) Approx download time in seconds (1 byte = 8 bits; ignore overheads).
Step-by-step solution
1. Step 1
  Sum sizes; convert; divide by speed in consistent units.
Answer
(a) Total = 50 + 30 + (4 × 600) = 50 + 30 + 2,400 = 2,480 KB = 2,480 ÷ 1,024 = 2.42 MB.

(b) Size in megabits = 2.42 MB × 8 = 19.38 megabits; time = 19.38 ÷ 8 Mbps ≈ 2.42 seconds.

(Equivalently: download time in seconds = file size in MB × 8 ÷ speed in Mbps.) Large images dominate — optimising them is the biggest speed win.
Examiner tip
Watch bits vs bytes (1 byte = 8 bits). Images usually dominate page weight — compression is the key optimisation.
5Calculate the impact of optimising images
Higher• Edexcel 4IT1 style — calculation (5 marks)• optimisation, AO2, AO3
Question
The 4 images above (600 KB each) are compressed to 150 KB each. With HTML 50 KB and CSS 30 KB unchanged, calculate: (a) The new total size in KB. (b) The percentage reduction in total page size from 2,480 KB.
Step-by-step solution
1. Step 1
  Recompute total; find % reduction.
Answer
(a) New total = 50 + 30 + (4 × 150) = 50 + 30 + 600 = 680 KB.

(b) Reduction = 2,480 − 680 = 1,800 KB; % = 1,800 ÷ 2,480 × 100 = 72.6%.

Compressing images cut the page by ~73% — far faster loading, especially on mobile/slow connections.
Examiner tip
% reduction = (old − new) ÷ old × 100. Image optimisation is the most effective web-performance fix.
6Calculate links in a navigation structure
Higher• Edexcel 4IT1 style — calculation (5 marks)• navigation, AO2
Question
A website has 6 pages. Every page has a navigation bar linking to ALL other pages (not itself). Calculate: (a) Links per page. (b) Total navigation links across the site. (c) If a 'Home' logo link to the homepage is added to every page, the new total.
Step-by-step solution
1. Step 1
  Links per page = pages − 1; multiply by pages.
Answer
(a) Links per page = 6 − 1 = 5.

(b) Total = 5 × 6 = 30 links.

(c) Add 1 home link per page: 30 + 6 = 36 links (though the homepage's own logo may link to itself — design choice).

Consistent navigation on every page helps usability and is expected in good site design.
Examiner tip
A consistent nav bar on every page is a usability requirement. Show clear working for the counts.
7Plan and build a small website
Higher• Edexcel 4IT1 style — extended (8 marks)• site-build, AO1, AO2
Question
A local cafe wants a 4-page website (Home, Menu, About, Contact). Describe how you would plan and build it, including structure, styling, navigation and media.
Step-by-step solution
1. Step 1
  Plan → structure (HTML) → style (CSS) → navigation → media → test.
Answer
1. Plan.

Decide pages (Home, Menu, About, Contact) and a site map.

Sketch a consistent layout (header, nav, content, footer).

Identify content and target audience.

2. Structure with HTML.

Each page: headings (<h1>), paragraphs (<p>), images (<img>), lists for the menu (<ul>).

Contact page: a form (name, email, message).

3. Style with CSS (external stylesheet).

One CSS file linked to all pages → consistent colours, fonts, spacing.

Editing the stylesheet updates the WHOLE site at once.

Use the cafe's brand colours; readable font sizes.

4. Navigation.

A consistent navigation bar on EVERY page linking to all 4 pages.

A clickable logo returning to Home.

5. Media.

Optimised (compressed) images of food/interior with alt text.

Maybe an embedded map on Contact.

6. Accessibility & responsiveness.

Alt text on images; good colour contrast; responsive layout for mobile.

7. Test and publish.

Test all links, forms and layout on different devices/browsers.

Upload to web hosting.

Why external CSS + consistent nav? Consistency, easy maintenance, and good usability — the marks of a professional, fit-for-purpose site.
Examiner tip
A* answers (1) PLAN with a site map, (2) separate HTML structure from CSS styling (external stylesheet), (3) give consistent navigation, (4) cover accessibility/responsiveness and testing.
8Compare WYSIWYG editors with hand-coding
Higher• Edexcel 4IT1 style — evaluate (8 marks)• wysiwyg-vs-code, AO2, AO3
Question
A small business owner with no coding skills must choose between a WYSIWYG website builder (e.g., Wix) and hand-coding in HTML/CSS. Evaluate both and recommend an option.
Step-by-step solution
1. Step 1
  Weigh ease, control, cost, speed; conclude for this user.
Answer
WYSIWYG builder (Wix/Squarespace):

Pros: no coding needed; fast; drag-and-drop; templates; hosting included; visual preview.

Cons: less control over fine details; can produce bloated code; ongoing subscription; harder to migrate away; some lock-in.

Hand-coding HTML/CSS:

Pros: full control; clean, efficient code; no platform lock-in; potentially cheaper hosting; better performance/SEO if done well.

Cons: requires coding skills; slower to build; must arrange own hosting and maintenance.

Evaluation for THIS user (no coding skills, small business):

The owner can't hand-code, and learning would take significant time.

A WYSIWYG builder lets them launch quickly with a professional look and built-in hosting.

Recommendation: a WYSIWYG builder is more fit for purpose here — it matches the owner's skills, budget and need to launch quickly. Hand-coding would suit a skilled developer wanting full control.

Conclusion: the right choice depends on SKILLS, TIME, BUDGET and CONTROL needed — for a non-technical small business, WYSIWYG wins.
Examiner tip
Match the tool to the USER. Weigh ease vs control vs cost; give a justified verdict tied to this user's skills and needs.
9Design for accessibility and usability
Stretch• Edexcel 4IT1 style — extended (8 marks)• accessibility, AO2, AO3
Question
A public-services website must be usable by people with visual impairments, motor difficulties and those on slow mobile connections. Describe the design features you would include and why.
Step-by-step solution
1. Step 1
  Address each need with specific accessibility/usability features.
Answer
For visual impairment:

Alt text on all images so screen readers describe them.

High colour contrast between text and background.

Resizable text / relative font units that scale without breaking layout.

Logical heading structure (<h1>→<h2>) for screen-reader navigation.

For motor difficulties:

Large, well-spaced clickable buttons/links (easy targets).

Full keyboard navigation (not mouse-only).

Avoid actions that require precise timing.

For slow mobile connections:

Optimised/compressed images to reduce page weight.

Responsive design that adapts to small screens.

Minimal heavy media; lazy-load images.

General usability:

Consistent navigation on every page.

Clear, simple language and layout.

Descriptive link text ('Download form', not 'click here').

Why accessibility matters:

It's a LEGAL/ethical requirement for public services (equality of access).

It widens the audience and improves usability for EVERYONE.

Many features (clear structure, fast loading) also help SEO and mobile users.

Conclusion: accessible design is fit-for-purpose design — it serves all users, not just some.
Examiner tip
A* answers map SPECIFIC features to SPECIFIC needs (alt text→screen readers, contrast→low vision, keyboard nav→motor, compression→slow connections) and note the legal/ethical and SEO benefits.

Key Formulae — Web authoring

The formulae you need to memorise for web authoring on the Pearson Edexcel IGCSE 4IT1 paper, with every variable defined in plain English and a note on when to use it.

Total page size
$Page size = HTML + CSS + JS + sum of media files$
When to use
Estimating download weight.
Example
50 + 30 + (4×600) = 2,480 KB.
Download time
$Time (s) = file size (MB) × 8 ÷ connection speed (Mbps)$
When to use
Estimating load time (1 byte = 8 bits).
Example
2.42 × 8 ÷ 8 ≈ 2.42 s.
Percentage size reduction
$Reduction (%) = (old − new) ÷ old × 100$
When to use
Measuring optimisation impact.
Example
(2,480 − 680) ÷ 2,480 × 100 ≈ 72.6%.

Key Definitions and Keywords — Web authoring

Definitions to memorise and the exact keywords mark schemes credit for web authoring answers — sharpened from recent examiner reports for the 2026 Pearson Edexcel IGCSE 4IT1 sitting.

HTML
Examiner keyword
HyperText Markup Language — defines the structure and content of a web page using tags.
CSS
Examiner keyword
Cascading Style Sheets — controls the presentation (colours, fonts, layout) of web pages.
Hyperlink
Examiner keyword
A clickable element (<a>) that navigates to another page, site or location.
URL
Examiner keyword
Uniform Resource Locator — the unique address of a web resource.
WYSIWYG
Examiner keyword
What You See Is What You Get — visual editors (Wix, Squarespace) that build sites without coding.
CMS
Content Management System (e.g., WordPress) — manages site content with templates and plugins.
Alt text
Examiner keyword
Alternative text describing an image for screen readers and when images fail to load.
Responsive design
Examiner keyword
A layout that adapts to different screen sizes (desktop, tablet, mobile).
Navigation
The system of menus and links that lets users move around a website.
External stylesheet
Examiner keyword
A single CSS file linked to all pages, giving consistent styling and one-place editing.

Common Mistakes and Misconceptions — Web authoring

The traps other students keep falling into on web authoring questions — taken from recent Pearson Edexcel IGCSE 4IT1 examiner reports and mark schemes — and how to avoid them.

✕Mixing styling into HTML instead of using CSS.
Edexcel 4IT1 examiner reports.
Why it happens
Inline styling feels quicker.
How to avoid it
Keep STRUCTURE (HTML) and PRESENTATION (CSS) separate; use an external stylesheet for consistency and easy editing.
✕Omitting alt text on images.
Edexcel 4IT1 examiner reports.
Why it happens
Forgetting accessibility.
How to avoid it
Always add descriptive alt text — needed for screen readers and when images fail to load.
✕Using huge unoptimised images.
Why it happens
Uploading originals.
How to avoid it
Compress/resize images — they dominate page weight and slow loading, especially on mobile.
✕Inconsistent or broken navigation.
Why it happens
Building pages separately.
How to avoid it
Use the SAME navigation bar on every page and test all links work.
✕Using 'click here' as link text.
Why it happens
Habit.
How to avoid it
Use descriptive link text ('Download menu') — better for usability, accessibility and SEO.

Practice questions

Exam-style questions with step-by-step worked solutions. Try one before checking the method.

Past paper style quiz

Get a report showing which sub-topics you've nailed and which ones still need work.

Web authoring

Short Study Notes in the form of Slides

Short Study Notes — Web authoring

Detailed Notes

What you’ll learn

How it’s examined

1Identify the web element/technology

2Identify the purpose of each HTML tag

3Identify the CSS property for each effect

4Calculate page load time

5Calculate the impact of optimising images

6Calculate links in a navigation structure

7Plan and build a small website

8Compare WYSIWYG editors with hand-coding

9Design for accessibility and usability

Total page size

Download time

Percentage size reduction

HTML

CSS

Hyperlink

URL

WYSIWYG

CMS

Alt text

Responsive design

Navigation

External stylesheet

✕Mixing styling into HTML instead of using CSS.

✕Omitting alt text on images.

✕Using huge unoptimised images.

✕Inconsistent or broken navigation.

✕Using 'click here' as link text.

Practice questions

Past paper style quiz

Assess your understanding