The skeleton of a page

The file you made in the last lesson works, but it is missing its frame. Every real page starts from the same small skeleton, and each line of it is doing a job worth understanding rather than copying.

Here it is in full:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Karachi Canteen</title>
  </head>
  <body>
    <h1>Karachi Canteen</h1>
    <p>Open from 8am until 6pm.</p>
  </body>
</html>

Five things are happening. Take them one at a time.

The doctype

<!DOCTYPE html>

This is not really an element — it is an instruction to the browser, and it must be the very first thing in the file.

It says: render this using modern standards. Without it, browsers drop into what is called quirks mode, where they deliberately reproduce the bugs of 1990s browsers so that ancient pages still look right. Layouts measure differently, spacing changes, and you will chase problems that have nothing to do with your code.

There is nothing to learn here beyond writing it. It used to be a long incomprehensible line; <!DOCTYPE html> is the modern form and it is all you need.

The html element, and its language

<html lang="en">

Everything else lives inside <html>. It is the root — the trunk that every other element hangs off.

The lang attribute says which human language the page is written in. It is easy to skip and worth keeping, because things you cannot see depend on it. A screen reader chooses its pronunciation rules from lang — English text read with Urdu pronunciation is close to unintelligible. Browsers use it to offer translation. Search engines use it to decide who to show your page to.

Use en for English. If you write a page in Urdu, use ur.

The head is not for visitors

<head>
  <meta charset="utf-8">
  <title>Karachi Canteen</title>
</head>

This is where beginners lose an afternoon, so it is worth being blunt about it: nothing you put in the head appears on the page.

The head is information about the document, addressed to the browser and to machines like search engines. Put a paragraph in there and it simply will not show up. You will look at your file, see the text plainly written, look at the browser, see nothing, and assume something is broken. Nothing is broken — it is in the wrong half.

Two things belong there from day one.

<meta charset="utf-8"> tells the browser which character encoding the file uses. UTF-8 covers essentially every character in every writing system — English, Urdu, Arabic, emoji. Leave it out and a browser has to guess, and when it guesses wrong you get the mangled characters you have seen on badly built sites: Ayesha’s instead of Ayesha's. Put it first, before the title, so the browser knows how to read everything that follows.

<title> is the name of the document. It shows in the browser tab, it is what gets saved when someone bookmarks the page, and it is the blue clickable line in Google's results. It is one of the most valuable pieces of text on your page, and it is not visible anywhere on the page itself.

Write titles for a person scanning a list of results:

<title>Karachi Canteen — menu and opening hours</title>

Not this:

<title>Untitled Document</title>

Which, embarrassingly, is what a great many real pages say.

The body is everything visible

<body>
  <h1>Karachi Canteen</h1>
  <p>Open from 8am until 6pm.</p>
</body>

Everything a visitor reads, clicks or looks at goes in the body: headings, paragraphs, images, buttons, forms, the lot.

The split is the thing to hold on to. Head is about the page. Body is the page.

Getting the nesting right

The skeleton nests in a fixed order, and it never varies:

• html contains exactly two children: head, then body
• head and body are siblings — one is never inside the other
• Everything else lives inside one of them

Indentation is not required by the browser; it is required by you. Two spaces per level, consistently, and the structure is visible at a glance. Without it, a page of a hundred lines becomes very hard to reason about.

A page you can build on

Put this in a file called index.html and open it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bilal's practice page</title>
  </head>
  <body>
    <h1>Bilal's practice page</h1>
    <p>Everything below here is something I am learning.</p>
  </body>
</html>

Look at the browser tab: it says Bilal's practice page, and that text appears nowhere in the page itself. That is the head doing its job.

Now try moving the <p> element up into the head, save, and reload. The paragraph vanishes. Move it back. That one experiment will save you the afternoon.

You will write this skeleton so many times that you will stop thinking about it, which is fine — but it is worth knowing what each line is for, because when one is missing the symptoms are strange and unrelated-looking.

Next: headings, where the trap is choosing a level for the way it looks rather than what it means. After that, paragraphs and text.