Lesson 01 · First page

What HTML is

Every web page starts as a plain text file. HTML is the language of that file: tags that say which part is a heading, which is a paragraph and which is a link. Follow a five-line file as a browser reads it, line by line, and watch each element appear on the page. Then meet the two languages that work alongside it: CSS for looks and JavaScript for behaviour.

8 min11 steps5 questionsBeginner

Fig 1 · Interactive

Loading figure…

or ← →

Put it into practice

Try it

0/1 exercises passed

Give your page a heading

Create an h1 with the exact text My first page, then add a paragraph. Watch the preview change as you type.

Your code

Ctrl/Cmd + Enter to run. Tab indents; Escape then Tab leaves the editor.

Ready

Output

Run your code to see its output.

Checks

Check your code when you’re ready.

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01In <h1>Hello!</h1>, which part is the closing tag?

The closing tag repeats the element's name with a slash: </h1>. <h1> is the opening tag, Hello! is the content, and all three together make one element.

02What does the browser show for <title>My page</title>?

The title element is not drawn on the page. The browser shows it on the tab and uses it as the suggested name for a bookmark.

03Which line nests its elements correctly?

An element inside another must close before the outer one does: open p, open em, close em, close p.

04In <a href="about.html">About</a>, what is href="about.html"?

Attributes sit inside the opening tag as name="value" and add details. href is the link's destination; About is the content the reader clicks.

05Which job belongs to HTML rather than to CSS or JavaScript?

HTML describes what each part is (structure). CSS sets how it looks, and JavaScript, a programming language, makes the page do things.

Key terms

Glossary

HTML: HyperText Markup Language: plain text with tags that describes the structure of a web page.
Tag: A label in angle brackets. An opening tag like <p> starts an element; a closing tag like </p>, with a slash, ends it.
Element: An opening tag, its content and its closing tag together, such as <h1>Hello!</h1>: one part of the page.
Attribute: Extra information inside an opening tag, written name="value", such as href="about.html" on a link.
Nesting: Putting elements inside other elements. The inner one must close before the outer one.
Browser: The program that reads HTML files and draws the pages they describe, such as Chrome, Firefox, Safari or Edge.
CSS: Cascading Style Sheets: the language that sets how HTML looks, such as colours, fonts and layout.
JavaScript: A programming language the browser runs to make a page interactive.

Fine print

Notes and sources

A complete page usually also has <html>, <head> and <body> tags. The HTML standard lets you leave them out, and the browser adds them for you, so these five lines make a working page. A later lesson shows the full shape.
<!DOCTYPE html> switches the browser to "standards mode". Without it, browsers fall back to "quirks mode", which copies the bugs of very old browsers.
The browser reads the whole file in order and builds the page from it almost at once. The figure draws one element per step so you can follow it.
How big a heading is, the italics and the blue underline are the browser's default styles. CSS can change all of them; the HTML only says what each part is.
The file on the card is real HTML. Save it as index.html, open it in any browser and you get the page shown.

Quiz Unlocks after the last step.