What HTML is and how a browser reads it

Introduction

Every page you have ever opened on the web started as plain text. A news article, a shop, a bank login: the browser received text, and most of that text was HTML.

HTML is not a programming language in the usual sense. It has no loops and does no arithmetic. It is a markup language: you take ordinary text and mark each part to say what it is. "This is a heading. This is a paragraph. This is a link." Everything else on the web is built on top of that.

How it works

Three languages share the work on a web page, and it helps to keep them apart from the first day:

• HTML says what things are: a heading, a list, a button.
• CSS says how they look: colours, spacing, layout.
• JavaScript says what they do: react to a click, fetch new data.

You mark text with tags. A tag is a name inside angle brackets. Most parts of a page use a pair: an opening tag, and a closing tag with a slash. The whole thing, tags and content together, is called an element.

When a browser receives HTML, it reads from top to bottom and builds a tree in memory. Each element becomes a branch, and anything inside it becomes smaller branches. This tree is called the DOM (Document Object Model), and it is what you see on the screen. CSS and JavaScript both work on this tree, not on your text.

That is why nesting matters. If a strong element sits inside a p element, the bold words are a branch of that paragraph. Tags must close in the reverse order they opened, like boxes inside boxes.

Why does the browser not simply show an error when your HTML is wrong? Because the web was designed to be forgiving: a page with one mistake should still be readable. The browser guesses what you meant and carries on. That is kind to readers, but it means nobody warns you. Your page can look right and still be wrong, and a different browser or a screen reader may guess differently.

Syntax

<p>This is a paragraph.</p>

<p> is the opening tag, </p> is the closing tag, and the text between them is the content.

Example

Press Run the page, then change the words and run it again.

Line by line

1. <h1>Rina's first page</h1> is a top-level heading. The browser shows it large and bold because headings are styled that way by default.
2. <p>I am learning <strong>HTML</strong> today.</p> is a paragraph. Inside it, strong marks one word as important, so the tree has a branch inside a branch.
3. The last line is a second paragraph. Paragraphs start on a new line by themselves; you did not need to ask for that.

Expected result

A large heading reading "Rina's first page", then two separate paragraphs, with the word HTML in bold.

In the real world

Open any web page, right-click, and choose View page source. You will see the HTML the server sent. Pages at large companies are long and often generated by programs, but they are made of these same elements. When a developer says "the page is broken", the first place they look is often this tree, in the browser's developer tools.

Common mistakes

• Forgetting the closing tag. <p>Hello makes the browser guess where the paragraph ends.
• Overlapping tags. <p><strong>Hi</p></strong> closes the outer element first. Close the inner one first: <p><strong>Hi</strong></p>.
• Using a heading to make text big. Headings mean "this starts a new section". To change only the size, use CSS.

Best practices

• Write tag names in lowercase. HTML does not care, but everyone reading your code expects it.
• Indent elements placed inside other elements, so you can see the tree in your text.
• Choose each element for what the content is, not for how it happens to look.

Summary

HTML marks up plain text so a browser knows what each part is. An element is usually an opening tag, content and a closing tag. Elements nest into a tree, and the browser builds that tree and shows it, quietly repairing your mistakes as it goes.

Mark lesson complete