Which heading is the most important: or ?

. Headings run from (most important) down to .

or — which gives a numbered list?

, an ordered list. gives a bulleted (unordered) list. Each item goes in an .

KS3 · Computer Science

Introduction to HTML

Every web page you've ever visited began as a plain text file — just words wrapped in little labels like <h1> and <p>. Today you learn to write the labels.

Computer Science · Structure

A web page is a tree of boxes

Each line joins an element to the element it sits inside. Tap any box to find out what it's for.

Tap any part of the diagram to see what it does.

Closing nested tags

Close the boxes in the right order

You've typed <body><ul><li><a href="home.html">Home — four boxes, each inside the one before. Put the closing tags in the order you write them.

1 · Write this closing tag first4 · Write this closing tag last

</body>
</li>
</a>
</ul>

Watch out: The tempting answer is to close them in the order you opened them. That shuts the outer box while the inner ones are still open.

Predict, then check

Read the file like a browser: head first, then body.

A browser opens this file: <!DOCTYPE html> <html> <head> <title>Pond Life</title> </head> <body> <h1>Frogs</h1> <ol> <li>Spawn</li> <li>Tadpole</li> <li>Frog</li> </ol> </body> </html> — what do you see?

What HTML is really for

What does HTML actually do?

Your friend has just written their first web page and is showing it off: 'Look, I coded it in HTML!'

Which is closest to what you think HTML does?

HTML is a programming language — it's the code that makes the page run.HTML sets the colours and fonts, so it decides how the page looks.HTML labels what each part of a page is — heading, paragraph, image, link — and the links join pages together.

How sure are you?

I'm sureI think soI'm guessing

HTML is a programming language — it's the code that makes the page run.

This is a common misconception

Easy one to believe, because HTML looks like code. But HTML doesn't give the computer steps to carry out. Its full name tells you what it is: HyperText Markup Language. A markup language labels things — this part is a heading, this is a paragraph, this is a link — and the browser reads those labels and displays the page.

HTML sets the colours and fonts, so it decides how the page looks.

This is a common misconception

Not quite. HTML says WHAT each part is, not what it looks like. A heading is marked as a heading whatever colour it ends up. The visual style — colours, fonts, layout — is usually controlled separately, with a different language called CSS.

HTML labels what each part of a page is — heading, paragraph, image, link — and the links join pages together.

This matches the evidence

Spot on. HTML describes a page's structure and content, and the browser turns that into the page you see. Those links matter more than they look: hyperlinks join pages to each other, which is what makes the World Wide Web a web of linked pages.

HTML marks up structure and content; the browser renders it; CSS usually handles the look; and hyperlinks join pages into a web.

WHAT YOU'VE LEARNED

A quick recap of today's lesson.

HTML doesn't draw a page. It labels what each part is — and the browser does the drawing.

What you need to know

A web page is a text file written in HTML, a markup language that labels what each part of the page is.
A web browser reads the HTML and displays (renders) the page.
HTML is written with tags in angle brackets; an element is the opening tag, the content and the closing tag together.
Every page has the same skeleton: <!DOCTYPE html>, then an <html> element holding a <head> and a <body>.

The big picture

A web page is a text file written in HTML (HyperText Markup Language). HTML is a markup language: it describes a page's structure and content by wrapping each part in tags, and a web browser reads it and displays the page. Elements sit inside other elements — a head and a body inside html — and nested tags close in the reverse order to the one they were opened in.

Key points

1In <p>Hi</p>, <p> is the opening tag and </p> is the closing tag — the closing tag has a forward slash. The whole thing is the element.

2The <head> holds information about the page, such as the <title> shown in the browser tab. The <body> holds the content that appears on the page.

3Headings run from <h1> (most important) to <h6>. <p> is a paragraph, <a> is a hyperlink and <img> is an image.

4<ul> makes an unordered (bulleted) list and <ol> an ordered (numbered) list; each item goes in its own <li>.

5Attributes go inside the opening tag: href gives the address a link goes to, src gives the location of an image file, and alt describes the image for people who can't see it.

6Some elements, such as <img>, have no closing tag.

7Nested tags close in reverse order: the last one opened is the first one closed.

8Hyperlinks join pages together into the World Wide Web. The look of a page — colours, fonts, layout — is usually set separately with CSS.

.we-_R_18slubsnpfiv5ubrb_ [data-we-step]{display:flex !important}.we-_R_18slubsnpfiv5ubrb_ [data-we-solution]{display:block !important}.we-_R_18slubsnpfiv5ubrb_ [data-we-reveal]{display:none !important}

Worked example

Problem

Write the HTML for a page about a school chess club. The browser tab should say Chess Club. On the page there should be a main heading Chess Club, a paragraph saying We meet on Fridays., and a picture from the file board.jpg, described as A chessboard for anyone who can't see it.

⚠ Watch out

Closing tags in the same order you opened them, like <p>Visit <a href="games.html">my games</p></a>. The <a> was opened last, so it has to close first: <p>Visit <a href="games.html">my games</a></p>.

🧠

Memory hook

Think of nesting dolls. You can't close the big doll until the small one inside it is shut. Last opened, first closed.

✓

Check yourself

Cover the page and write an HTML skeleton from memory: doctype, then <html> holding a <head> (with a <title>) and a <body>. Is every tag closed, last-opened first?

Flashcards

(15)

What is HTML?

HyperText Markup Language — a markup language that describes the structure and content of a web page.

What does a web browser do with an HTML file?

It reads the HTML and displays (renders) the page.

What is the difference between a tag and an element?

A tag is one label in angle brackets, like <p> or </p>. An element is the opening tag, the content and the closing tag together.

How is a closing tag written differently from an opening tag?

It has a forward slash after the first angle bracket: <p> opens, </p> closes.

What is the first line of an HTML document?

The doctype declaration: <!DOCTYPE html>.

Which part of an HTML page describes the page rather than appearing on it?

The <head>. For example, its <title> turns up in the browser tab.

What goes in the <body>?

The content that appears on the page — headings, paragraphs, images, links and lists.

Which heading is the most important: <h1> or <h6>?

<h1>. Headings run from <h1> (most important) down to <h6>.

<ul> or <ol> — which gives a numbered list?

<ol>, an ordered list. <ul> gives a bulleted (unordered) list. Each item goes in an <li>.

What does the href attribute on a link give?

The address of the page the link goes to.

What do src and alt give on an image?

src gives the location of the image file; alt gives a text description for people who can't see it, such as screen-reader users. Both sit inside the opening tag.

Name a common element with no closing tag.

<img>.

In what order do nested tags close?

The reverse of the order they were opened — last opened, first closed.

What makes the World Wide Web a 'web'?

Hyperlinks joining pages to each other.

What usually controls a page's colours, fonts and layout?

CSS, kept separate from the HTML that sets out the structure.

Tap any card to flip it, or use Study as deck to go through them one at a time. In the full lesson these run as a spaced-repetition deck — you rate each card Hard, Good or Easy and the tricky ones keep coming back until they stick.

Learning with Lightbulb is opening soon

You can use this lesson now. Join the waitlist and we'll let you know when the full Lightbulb experience is ready.

Keep me posted

Introduction to HTML

A web page is a tree of boxes

What does each element need?

Close the boxes in the right order

What does HTML actually do?

More KS3 Computer Science topics