Every website you have ever visited — Google, YouTube, your bank, this page — is built on HTML. It is the very first thing to learn, and the good news is that it is genuinely friendly. In this lesson we will not just read about HTML; you will write it and watch it come alive in the editor on this page. Let's get you to your first working web page in under a minute.
1What is HTML?
HTML stands for HyperText Markup Language. That sounds technical, but the idea is simple: HTML is how we describe the structure of a page to the browser. It is a set of labels — called tags — that you wrap around your content to say what each piece is.
Think of building a house. HTML is the bricks and rooms — the walls, the doorways, the layout. It is the structure. Later, CSS is the paint and furniture (how it looks) and JavaScript is the electricity (what it does). You always build the structure first.
When you write a tag like <h1>, you are telling the browser: "this is the most important heading on the page." The browser then knows to show it big and bold, and a search engine knows it is the page's main title. One small label carries a lot of meaning.
- HTML = HyperText Markup Language — it describes the structure of a page.
- It uses tags to label content (this is a heading, this is a paragraph, this is an image).
- House analogy: HTML = bricks/structure, CSS = paint, JavaScript = electricity.
- HTML is markup, not programming — there is no logic or maths to learn here.
2The skeleton of every web page
Almost every HTML page shares the same basic skeleton. You will type it so many times it will become second nature. Here is the structure, and what each part is for:
<!DOCTYPE html>— the very first line. It simply tells the browser "this is a modern HTML page."<html>— the root. Everything else lives inside it.<head>— information about the page that the visitor does not see directly: its title, character set, and links to styles. Think of it as the page's label and settings.<body>— everything the visitor actually sees: headings, text, images, buttons.
Notice how tags nest inside one another, like boxes inside boxes. <title> sits inside <head>, which sits inside <html>. This nesting is what makes an HTML document a neat tree.
<h1> and watch the preview update instantly.- Every page starts with
<!DOCTYPE html>. <html>is the root; inside it sit<head>(settings, not visible) and<body>(the visible content).- Tags nest inside one another like boxes in boxes, forming a tree.
- Only what is inside
<body>appears on the page;<title>appears on the browser tab.
3Your first edit — ship something now
Enough reading — let's make something that is yours. The playground below starts with a tiny page. Replace Your name here with your actual name and watch the preview change. That is it. You just edited a real web page.
Then try a few things, one at a time:
- Change the heading text and the paragraph text.
- Add a second paragraph by writing another
<p>...</p>line under the first. - Try wrapping a word in
<strong>and</strong>to make it bold — for example<strong>hello</strong>.
- You edit HTML on the left and see the real web page on the right, live.
- Add a paragraph with
<p>...</p>; make text bold with<strong>...</strong>. - The playground is a safe sandbox — you cannot break anything, and Reset restores the start.
★ Practical: a one-line bio page
Use the playground in topic 3 to build a tiny page about yourself. Aim for:
- An
<h1>heading with your name. - One
<p>paragraph saying where you are from and one thing you like. - A second
<p>paragraph naming one thing you want to learn to build. - Make at least one word bold using
<strong>.
Ready to test yourself?
Take the short quiz. Score 60% or more to mark this lesson complete.
Start the quiz →💡 Log in to save your progress and earn the certificate.