What HTML is

Every page you have ever opened arrived at your browser as text. Not a picture of a page — text, with markers in it saying what each part is. Those markers are HTML, and once you can read them you can read the web.

HTML describes what things are

Here is a small piece of HTML:

<h1>Karachi Canteen</h1>
<p>Open from 8am until 6pm, every day except Friday.</p>

Read it as two statements. The first says this is the main heading of the page. The second says this is a paragraph. Neither says anything about size, colour, spacing or position.

That is the single most important idea in this track, and it is the one people get wrong: HTML is not about how a page looks. It is about what each piece of content is. Appearance is decided separately, by CSS.

It is tempting to think otherwise, because a browser does make headings big and bold. But that is the browser applying its own default styling to something you told it was a heading. You said what; the browser guessed how. Change the CSS and the same heading can be small and grey — still a heading, because that is what the HTML says it is.

This matters far beyond neatness. A screen reader announces headings so a blind reader can jump between sections. Google reads them to work out what your page is about. Both are trusting your HTML to be honest about structure.

Tags, elements and content

Look closely at the shape:

<p>Open until 6pm.</p>

Three parts:

• <p> is the opening tag. It marks where a paragraph begins.
• Open until 6pm. is the content — the part a visitor actually reads.
• </p> is the closing tag. The slash means this one ends here.

All three together are called an element. People say "tag" and "element" loosely in conversation, but the distinction is useful: the tags are the markers, and the element is the whole thing including what is between them.

Elements sit inside other elements, and that nesting is what turns a flat list of text into a structure:

<body>
  <h1>Cricket practice</h1>
  <p>Practice starts at <strong>5pm</strong> on the school ground.</p>
</body>

The <strong> element lives inside the paragraph, which lives inside the body. Read the indentation and you can see the shape of the page without reading a word of the content.

Nesting has one rule, and breaking it is the commonest beginner mistake: elements must close in the reverse of the order they opened. This is right:

<p>Practice starts at <strong>5pm</strong> today.</p>

This is wrong, because the paragraph closes while the strong element is still open:

<p>Practice starts at <strong>5pm</p></strong>

Browsers will usually repair that quietly and show something reasonable, which sounds helpful and is not — you never find out you made a mistake, and different browsers repair it differently.

A few elements do not close

A handful of elements have no content, so there is nothing to wrap and nothing to close:

<img src="canteen.jpg" alt="The canteen counter at lunchtime">
<br>
<hr>

<img> places an image, <br> forces a line break, <hr> draws a thematic break. You will meet all three properly later. For now just notice that they have no closing tag, because there is nothing between one.

How a browser reads your page

A browser reads HTML from the top down, in order, exactly as written. As it goes, it builds an internal model of the page — a tree of elements, each one inside its parent.

That reading order explains behaviour that otherwise looks random. Content near the top is dealt with first. An image referenced halfway down is not fetched until the browser reaches it. And, later on, a script that runs before the content it needs has been read will not find it.

It also explains why HTML is so forgiving. If you forget a closing tag, the browser does not stop and show an error the way a programming language would. It guesses, patches the tree and carries on. Being forgiving is what let the web grow, and it is also why a page that looks perfect can still be wrong.

Writing your first page

HTML lives in a plain text file whose name ends in .html. Not a Word document — a text file. Any editor will do: Notepad, VS Code, anything that saves plain text.

Make a file called index.html and put this in it:

<h1>Ayesha's first page</h1>
<p>I made this today.</p>

Save it, then open it in your browser — double-click the file, or drag it onto a browser window. Your heading appears large and bold, your paragraph in normal text.

You did not tell it to be large or bold. You said "this is a heading", and the browser styled it the way it styles headings by default.

The name index.html is worth using deliberately. When a web server is asked for a folder rather than a specific file, it looks for index.html and serves that. It is the front door, by long convention.

What you have not done yet

That file is a real HTML document in the sense that a browser will render it, but it is missing its skeleton — the wrapper that declares what kind of document it is, what language it is written in, and which parts are for the visitor versus for the browser. Without it you will hit strange bugs with accented characters and search engines.

That skeleton is the next lesson. After it, you will look at headings properly, and why choosing one because it looks the right size is the trap this whole track is built to keep you out of.