HTML Construction Zone
Every webpage is built from elements.
Your mission
Hard hats on! A webpage is put together from elements, like a building is put together from bricks. Find out what each kind of element does, build your own page by dragging elements into the code, then follow three blueprints exactly. Watch the HTML code and the webpage change together as you build.
Explore
Find out about each kind of element: tap it in the code or on the page.
On the left is the HTML code of a small webpage, and next to it is the page a browser makes from it. Tap any element in the code or on the page to find out what it is.
0 of 6 kinds of element explored
Experiment
Build your own page and complete all seven building orders.
Building orders
0 of 7 orders complete
Challenge
Build three pages that match the blueprints exactly. Watch out: some blocks are wrong!
Build all 3 blueprints to continue.
Understand
Here is what you were building with, in the words you need for the exam.
What HTML is
HTML (HyperText Markup Language) is a markup language: it describes the content and structure of a webpage, such as which text is a heading, which is a paragraph and where the links and images go. It doesn't do calculations, and it isn't in charge of colours and fonts: that's the job of CSS.
The parts of an element
<p class="note">Bring your calculator.</p>
- Start tag: <p class="note">
- Attribute: class="note" (name class, value note). Attributes go inside the start tag and give extra information.
- Content: Bring your calculator.
- End tag: </p>
The whole thing, tags and content together, is one element. Void elements such as img, br, hr and input have no content and no end tag.
The structure of every page
The head describes the document: its title appears on the browser tab. The body holds everything visible on the page.
Elements you built with
| Element | What it is for |
|---|---|
| h1 to h6 | Headings, from the most important (h1) to the least (h6). Choose the level by importance, not by size. |
| p | A paragraph of text. |
| a href="..." | A link. href is the destination; the content is the text you click. |
| img src="..." alt="..." | An image. src is the file to show; alt describes it for people who can't see it. |
| ul, ol, li | Lists: ul has bullets, ol is numbered for steps where the order matters. Each item is an li. |
| table, tr, th, td | A table: tr is a row, th a header cell, td a data cell. |
Words to know
- Element
- A start tag, its content and its end tag together.
- Tag
- The markers in angle brackets, like <p> and </p>.
- Attribute
- Extra information in a start tag, written name="value".
- Void element
- An element with no content and no end tag, such as img.
- Nesting
- Elements inside other elements, like li inside ol, or everything inside body.
Exam tip
Read HTML like a tree: what's in the head (the title on the tab) and what's in the body (the visible page). Always close what you open, in the reverse order: <li> closes before </ol>. And remember: the visible link text doesn't decide where a link goes. Only href does.