🌐 Lesson 1: Your First Web Page

Tags, elements, and the skeleton every web page shares

← Back to Web Coding

🏷ïļ HTML is labelling, not programming

Imagine writing out a story and then going back with a highlighter: this bit is the title, this bit is a paragraph, this bit is a picture. That is all HTML is. You write the words, then you label each piece so the browser knows what it is looking at.

The labels are called tags, and they come in pairs that wrap around the thing they describe:

<h1>Dragons</h1> <p>Dragons are large and usually on fire.</p> ↓ and here is what the browser makes of it

You did not tell the browser to make the title big and bold. You told it this is a heading, and it already knew what headings look like.

🔎 The parts of a tag

Every element has the same three parts:

<p>the opening tag — "a paragraph starts here"
Hello!the content — whatever goes inside
</p>the closing tag — note the slash

Put together, one element:

<p>Hello!</p>

📌 The slash is the whole difference

<p> opens. </p> closes. Forget the slash and the browser keeps waiting for the paragraph to end — and everything after it joins in.

📐 Headings come in six sizes

h1 is the biggest and most important, down to h6. Use h1 for the name of the page, and the smaller ones for sections inside it.

<h1>h1 — the title of the page</h1> <h2>h2 — a big section</h2> <h3>h3 — a smaller one</h3> <p>And a p for ordinary writing.</p> Try it — this is live

⚠ïļ Size is not the point

It is tempting to pick h3 because you like the size. Pick by importance instead — a page with its headings in order is one a blind reader's screen reader can navigate, and one Google can understand.

ðŸĶī The skeleton

So far you have written the interesting bit. A complete page wraps it in a little skeleton that every web page in the world shares:

<!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hello!</h1> </body> </html>
  • <!DOCTYPE html> — "this is a modern web page". Not really a tag; just say it first.
  • <html> — everything lives inside this one.
  • <head> — facts about the page. Nobody sees these.
  • <title> — the name on the browser tab.
  • <body> — everything you can actually see.

🊆 Tags nest like Russian dolls

<body> is inside <html>, and your <h1> is inside <body>. Whatever opens last must close first — never <b><i>text</b></i>.

💎 Notes to yourself

Anything between <!-- and --> is a comment. The browser skips it entirely — it is there for the humans.

<h1>Party</h1> <!-- remember to add the date here --> <p>Bring cake.</p> Try it — this is live

Real pages are full of them. Leave notes for the person who reads your code next — which is usually you, three weeks later.

✅ What you learned

  • HTML labels pieces of a page; the browser already knows how each label should look.
  • An element is an opening tag, content, and a closing tag with a slash.
  • h1–h6 for headings, p for paragraphs.
  • Every page has the same skeleton: doctype, html, head, body.
  • Tags nest — last opened, first closed.
← Web Coding Hub Lesson 2: Text, Lists & Links →