What Is HTML? Your First Page

Mission 1 continues. Today you write your first web page, run it and make it yours.

Show the answer

Your browser. It reads the files and builds the page on your screen.

Front-end and back-end

Web work has two sides. The front-end is everything a visitor sees and uses: HTML gives the structure (what is a heading, what is a paragraph), CSS gives the look (colours, fonts, layout) and JavaScript decides what happens when you click.

The back-end works on the server, out of sight. When you tap "Buy", it updates the stock, sends the card details to the bank and saves the order in a database. Full-stack developers do both sides. This module is about the front-end.

Grouping

Front-end or back-end?

Required 15 XP

An online shop has many jobs. Who does each one?

HTML is a markup language

HTML means HyperText Markup Language. It is a markup language, not a programming language. It does not calculate or decide. It says what each part is: "this is a heading", "this is a paragraph". HTML is the base of every web page.

HTML is made of tags: words between < and >. An element is an opening tag, the content and a closing tag. The closing tag has a slash.

<h1>Welcome</h1>

Where you write HTML

A web page is a text file whose name ends in .html. Developers write it in a code editor, a program for writing code. Add-ons called extensions refresh the browser when you save, tidy your code and rename the closing tag for you. Here, the editor and the browser are inside the lesson: you write, press Run and see your page.

Every page starts the same way

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My first page</title>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

Go through the page one part at a time:

Step by step

Anatomy of a page

Required 10 XP

Four parts of every page. Use Next to go through them.

Build it and run it

Now build the same page from its lines. Guess first, then put the lines in order.

Practice

Build the page skeleton

Required 30 XP

Put the nine lines in order: tap a line, then tap the place where it goes, or use the arrows. Then press Run and check.

Make it yours

Write your own greeting in the heading, for example "Hello, I am Ayla". A nickname is fine. Add one paragraph of at least 5 words with <p> and </p>.

Practice

Make it yours

Required 30 XP

Your page from the last exercise. Write your own greeting in the h1, and add one paragraph of at least 5 words below it. Then press Run and check.

Front-end

The part of a website that visitors see and use: HTML, CSS and JavaScript.

Back-end

The part that works on the server: stock, payments, the database.

Markup language

A language that says what each part of a text is. HTML is one.

Tag

A word between < and >, like <h1>. A closing tag has a slash: </h1>.

Element

An opening tag, the content and a closing tag together.

Code editor

A program for writing code.

Attribute

Extra information inside an opening tag, like lang="en".

In short

• Front-end: what visitors see. Back-end: what happens on the server.
• HTML is a markup language made of tags. It says what each part is.
• Every page: <!DOCTYPE html>, then <html lang="en"> with a head and one body.

Sources

1. MDN Web Docs (2026). Introduction to the server side.
2. MDN Web Docs (2026). HTML (glossary).
3. MDN Web Docs (2026). Basic HTML syntax.
4. MDN Web Docs (2026). Code editors.
5. MDN Web Docs (2026). Doctype.
6. MDN Web Docs (2026). Quirks mode and standards mode.
7. MDN Web Docs (2026). lang.
8. MDN Web Docs (2026). <body>: The Document Body element.