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.
Web Design — HTML Basics 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.
Success criteria
- I can explain how an HTML page is structured using html, head and body.
- I can use heading, paragraph, image and link tags to build a page.
- I can link a CSS stylesheet and use it to change how my page looks.
- I can check my page for readability and alt text.
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?
Support and extension for web design — html basics
Support
- Provide a starter file with comments marking where each tag goes, so pupils fill in content rather than structure.
- Give a tag reference card with each tag, what it does and a one-line example.
- Pair pupils so one reads the task card and one types, swapping halfway.
Extension
- Add a navigation bar of links across two or three pages.
- Use CSS classes to style two paragraphs differently and explain the difference between a class and an element selector.
- Run the page through an accessibility checklist and fix every issue found.
Check for understanding
Quick questions for the plenary or an exit ticket. Tap a question to see the answer.
1. Which part of an HTML page holds the content the visitor sees?
Answer: The body.
2. What does the alt attribute on an img tag do?
Answer: It describes the image for people using screen readers and shows if the image cannot load.
3. Write the tag for a link to bbc.co.uk with the text BBC.
Answer: <a href="https://www.bbc.co.uk">BBC</a>
4. What is the difference between HTML and CSS?
Answer: HTML gives the page its structure and content; CSS controls how it looks.
Resources you will need
- A browser-based editor such as CodePen or Replit, or a school-approved alternative
- Starter HTML template
- Tag reference card
- Approved image URLs pupils can use
- Accessibility checklist for the plenary
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.
Make it yours
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 plan, no card required.