Web Design — HTML Basics — Year 6 Lesson Plan
National Curriculum: Computing KS2 — select, use and combine a variety of software to design and create a range of content that accomplishes given goals; understand that computers can be used to create a wide range of digital content.
Overview
Pupils have their first experience of text-based coding through HTML and CSS, moving beyond block-based environments to write code as text directly in a browser-based editor. They learn the fundamental structure of an HTML document, apply common tags, link a CSS stylesheet to control appearance, and evaluate their finished pages against accessibility and design criteria. The unit demystifies web pages — revealing that every website pupils visit is built from the same HTML structure they are now writing themselves.
Learning Objectives
- Describe the structure of an HTML document, including the html, head, and body elements.
- Use heading, paragraph, image, and hyperlink tags to build a simple web page.
- Link a CSS stylesheet to an HTML page and use it to change colours, fonts, and layout.
- Evaluate a web page against accessibility and design criteria and make targeted improvements.
Key Vocabulary
Suggested Lesson Structure
Open a simple, well-known website in a browser and use the browser developer tools (right-click, Inspect) to reveal the underlying HTML. Scroll through the code and point out familiar words: the page title in the <title> tag, heading text in <h1>, and a paragraph in <p>. Ask: what do you notice about the structure? How does the code relate to what we see on screen? Establish: every web page is built from code — and today we will write our own.
Using a browser-based editor (e.g. Replit, CodePen, or a school-hosted tool), type a basic HTML page from scratch, narrating each step: start with <!DOCTYPE html>, open <html>, then create a <head> with a <title>, and a <body> with an <h1> heading, a <p> paragraph, an <img> tag with a src attribute pointing to an image URL, and an <a> tag with an href attribute linking to another page. Save and preview. Then create a separate styles.css file, link it in the <head> using <link rel='stylesheet'>, and write three CSS rules changing the background colour, heading font colour, and paragraph font size.
Pupils open a starter template file with a basic HTML structure already in place and follow a step-by-step task card: add a second heading using <h2>, write two paragraphs of content about a topic of their choice, insert an image using an <img> tag with a provided URL, and add a hyperlink to a related website. They preview after each addition and fix any tags that do not display correctly.
Pupils customise their page using CSS: choose a background colour, change the text colour for headings and paragraphs, adjust font size, and add a simple border to the image. Pupils who complete this add a second page and link the two pages to each other using <a> tags.
Display two pupil web pages side by side and evaluate them against three criteria written on the board: Is the text readable against the background colour? Are the images labelled with alt text for accessibility? Does the heading clearly describe the page content? Pupils give one strength and one improvement for each page. Discuss: what makes a web page accessible — and why does it matter?
Common Misconceptions
- Pupils frequently forget to close tags (e.g. writing <p> without a matching </p>), causing subsequent content to be formatted unexpectedly — explain that every opening tag needs a closing tag and model checking pairs systematically.
- Some pupils assume CSS changes made to one element automatically apply to all elements — clarify that CSS rules must specify the element (or class) they target, and that h1 rules do not affect p elements unless written separately.
Prior Knowledge
Pupils should already be able to:
- Experience using browser-based tools and understanding that web pages are accessed via the internet.
- Familiarity with the idea that code gives instructions to a computer, from prior programming work.
Want a personalised version of this lesson?
Use Staffroom to generate a complete lesson plan tailored to your class — add context about ability, recent learning, or specific pupils and get a plan ready to teach. Free trial, no card required.