Learning Goals
3 minBy the end of this lesson you will be able to:
- Explain what an HTML tag, element and attribute are.
- Type the five-line HTML skeleton every page starts with, from memory.
- Use
<h1>,<h2>and<p>to add headings and paragraphs. - Save a file as
.htmland open it in a browser to see it render.
Warm-Up · Spot the Pattern
5 minLast lesson you saw the browser ask a server for HTML. HTML is just text with little labels around it. Look at this line:
<h1>Selamat datang!</h1>Talk together (or think quietly)
- There are two labels here. What is different between them?
- Which words will the visitor actually see on the page?
- The second label has an extra character the first one doesn't. What is it, and why might it be there?
Hint
One label opens and one label closes — the closing one carries a slash /. The visitor sees only the words between them: Selamat datang!
New Concept · Tags, Elements & the Skeleton
12 minHTML stands for HyperText Markup Language. Think of it like labelling boxes when you move house: you write “Kitchen”on a box so everyone knows what's inside. HTML labels each piece of your page — “this is a heading”, “this is a paragraph” — so the browser knows how to show it.
Tag vs element
The two words sound similar. Here is the difference:
Tag
A single label in angle brackets. Most come in pairs: an opening tag <p> and a closing tag </p> with a slash.
Element
The opening tag, the closing tag, and everything in between — all together. <p>Hello</p> is one paragraph element.
Attributes — extra information on a tag
Sometimes a tag needs extra detail. We add an attribute inside the opening tag, written as name="value". For example, lang="en" tells the browser the page is in English:
<html lang="en">Here lang is the attribute name and "en" is its value.
The skeleton every page starts with
Every web page in the world begins with the same small frame. Learn these five tags now and you'll type them on autopilot forever:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>What each line is for
<!DOCTYPE html>— tells the browser “this is modern HTML”. Always line one.<html>— wraps the whole page. Everything lives inside it.<head>— hidden setup: the title, the character set, links to styles. The visitor never sees it.<title>— the words shown on the browser tab, not on the page.<body>— everything the visitor actually sees goes in here.
Why it matters: the page you read on shopee.com.my this morning has exactly this skeleton underneath all its pictures and buttons. Master the frame and the rest is just filling it in.
Worked Example · A Page for a Nasi Lemak Stall
12 minLet's build a real page together. Aisyah runs a nasi lemak stall in Petaling Jaya and wants a simple page about it. Follow along in VS Code.
Step 1 — Make the file
Open VS Code. Create a new file (Ctrl+N) and save it (Ctrl+S) as aisyah-nasi-lemak.html. The .htmlending is what tells the browser “open me as a web page”.
Step 2 — Type the skeleton
Start with the frame from the New Concept section — then we fill the <body>.
Step 3 — Fill the body
Add headings and paragraphs inside <body>. Here is the finished file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Aisyah's Nasi Lemak</title>
</head>
<body>
<h1>Aisyah's Nasi Lemak Stall</h1>
<p>The best nasi lemak in Petaling Jaya. Open daily from 7am.</p>
<h2>Today's Menu</h2>
<p>Nasi lemak biasa — RM 3.50</p>
<p>Nasi lemak ayam — RM 7.00</p>
<p>Teh tarik — RM 2.00</p>
</body>
</html>Step 4 — Open it in the browser
Find aisyah-nasi-lemak.html in your folder and double-click it. Your browser opens and renders the page. No server needed — the file is right there on your laptop. It looks like this:
<h1> is biggest, <h2> is smaller, and the browser puts each paragraph on its own line — all from the tags, with no styling yet.What changed? Nothing about the words — we only labelled them. The browser read the labels and decided the sizes and spacing for us. That is the whole job of HTML.
Try It Yourself
13 minKeep aisyah-nasi-lemak.html open. After each change, save (Ctrl+S) and refresh the browser tab (Ctrl+R) to see it.
Task 1 — Add a closing line
Below the menu, add one more paragraph that says when the stall closes — for example “Sold out by noon most days!”. Save, refresh, and check it appears on its own line.
Task 2 — Change the tab title
Edit the text inside
<title>toAisyah's Stall · Best in PJ. Save and refresh. The page itself looks the same — but look at the browser tab. What changed, and why is the title not on the page?Task 3 — Make it your own stall
Invent your own food stall. Change the
<h1>to its name, rewrite the first paragraph, and give it a three-item menu withRMprices. Use one<h1>, one<h2>, and as many<p>elements as you need.
Mini-Challenge · Bug Hunt
8 minWei Jie wrote a page for his football club, but the browser shows it wrongly — the title and the first paragraph misbehave. There are two bugs. Find them before you reveal the fix.
Success criterion: every element has a matching opening and closing tag, and the page renders one heading followed by two separate paragraphs.
<!-- wei-jie-football.html — buggy -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wei Jie's Football Club
</head>
<body>
<h1>Bandar United FC</h1>
<p>We train every Saturday at Padang Bandar.
<p>New members are always welcome!</p>
</body>
</html>Reveal the answer
Bug 1: the <title> is never closed — it needs </title>. Bug 2: the first <p> is never closed, so the browser muddles the two paragraphs together. Add the missing </p>. Fixed version:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wei Jie's Football Club</title>
</head>
<body>
<h1>Bandar United FC</h1>
<p>We train every Saturday at Padang Bandar.</p>
<p>New members are always welcome!</p>
</body>
</html>Lesson learned: an opening tag almost always needs a matching closing tag. Forgetting the slash is the most common beginner bug — and now you can spot it.
Recap
3 min- HTML labels each piece of a page so the browser knows how to show it.
- A tag is one label (
<p>); most come in opening/closing pairs with a slash on the closer. - An element is the opening tag + content + closing tag together.
- An attribute adds extra info inside a tag, as
name="value". - Every page starts with the same skeleton:
<!DOCTYPE>,<html>,<head>,<title>,<body>. - The head is hidden setup; the body is what visitors see. Save as
.htmland double-click to open.
New words
- Tag — a label in angle brackets, e.g.
<h1>. - Element — a tag pair plus its content.
- Attribute — extra info on a tag, written
name="value". - Render — when the browser turns your HTML into the page you see.
Homework
4 min to brief · ~20 min to doRequired
- Create a new file
about-me.htmlwith the full HTML skeleton. In the body, add an<h1>with your name, a paragraph about yourself, an<h2>reading My favourite things, and three paragraphs — a favourite food, a favourite place in Malaysia, and a hobby. - Open it in your browser, take a screenshot, and bring both the file and the screenshot to next lesson.
Optional stretch
- Add a second heading
<h3>somewhere and notice how its size compares to<h1>and<h2>. Write one sentence about what you think<h1>through<h6>are for. - Right-click your page and pick View page source. Confirm the text you see matches the file you wrote — the browser kept every tag exactly as you typed it.