Lesson 2 of 32

Document Structure and Boilerplate

The handful of lines every HTML page starts with — doctype, lang, head metadata and body — and why each one exists, plus comments, void elements and whitespace collapsing.

7 min read

Every HTML page starts with the same handful of lines before any actual content appears. It looks like ceremony, but each line is doing a specific, necessary job. This lesson is about that scaffolding — you'll type it at the top of nearly every file you ever write, so it's worth knowing what it means rather than just memorising it.

The full boilerplate

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Page</title>
</head>
<body>
 
</body>
</html>

That's the whole skeleton. Nothing renders yet — <body> is empty — but every piece already matters.

`<!doctype html>`

This has to be the very first thing in the file, before even a blank line. It tells the browser: "treat this as a modern, standards-compliant HTML document." Without it, some browsers fall back to quirks mode, an emulation layer that reproduces the rendering quirks and bugs of browsers from the 1990s, for compatibility with very old pages. You do not want quirks mode — box sizing, table layout and other fundamentals behave differently (and worse) inside it.

Modern HTML only has one doctype, and it's the short one above. You don't need to remember any longer, older-looking version.

`<html lang="...">`

The lang attribute isn't decorative — it has two concrete, measurable effects:

Screen readers use it to select pronunciation rules and the correct voice. A screen reader given English text but no lang (or the wrong one) can mispronounce it badly, because pronunciation rules genuinely differ between languages.
Browser translation features use lang to know what language a page is written in, so they can decide whether to offer a translation and to what.

Set it to match the actual language of your content — en for English, fr for French, es for Spanish, and so on. If most of a page is in one language but a section is in another, you can set lang again on that specific element.

Inside `<head>`

Nothing in <head> is shown directly on the page. It's metadata — information about the document, for the browser, search engines, and other tools.

<meta charset="utf-8" />

This declares the character encoding, which is how the file's bytes map to actual text characters. UTF-8 covers essentially every character in every language plus emoji, and is the correct default for new pages. Leave it out or get it wrong, and text can render as garbled symbols.

<meta name="viewport" content="width=device-width, initial-scale=1" />

This one is specifically for mobile devices. Without it, phone browsers historically assumed pages were designed for a desktop-width screen (around 980px) and rendered them shrunk down to fit, forcing the visitor to pinch and zoom to read anything. This meta tag tells the browser: "use the device's actual width as the layout width, and start at 100% zoom." It's the first step toward a page that works on a phone — the full story of building genuinely responsive layouts is its own later lesson, but this single line is a prerequisite for all of it.

<title>My Page</title>

This sets the text shown in the browser tab, in bookmarks, and as the clickable headline in search results. It's the one thing in <head> a visitor does directly see, just not inside the page itself.

`<body>`

Everything that's actually visible on the page goes inside <body> — every heading, paragraph, image, link, button. A document has exactly one <head> and exactly one <body>, always in that order, both inside one <html>.

Comments

<!-- This is a comment. It is never shown to the visitor. -->

Comments are useful for leaving notes to yourself or teammates — why a piece of markup exists, what a section is for, a reminder to fix something later. They're stripped from what the visitor sees but still visible to anyone who views the page source, so don't put anything sensitive in one.

Void elements

Most HTML elements wrap content and need a closing tag: ..., <title>...</title>. A handful never have content, and so never have a closing tag at all. These are called void elements. You've already seen two:

<meta charset="utf-8" />
<br />
<img src="cat.jpg" alt="A cat" />

<meta>,   and <img> are void elements — there's nothing to put between an opening and closing tag, so there is no closing tag. The trailing / before > is optional in HTML (unlike XML) but commonly kept for clarity; either   or   is valid and renders identically.

Whitespace collapsing

HTML treats runs of whitespace — spaces, tabs, newlines — as a single space when rendering. This is why you can indent your HTML however you like for readability without it affecting the output.

<p>
  This paragraph
  is written across
  several lines.
</p>

That renders as a single line: "This paragraph is written across several lines." The line breaks and extra indentation in the source are collapsed away. If you actually want a visible line break, you need   (covered in the next lesson), not just a newline in your source file.

Try it yourself

Here's a complete, correctly structured document using everything from this lesson. Try removing the viewport meta tag and see how the description below the code would differ on an actual phone (in this desktop preview it won't look different, since there's no small viewport to shrink to).

Try it yourself· Edit the code, then press Run

Loading playground...

What to remember

<!doctype html> must be the first line — it turns on standards mode rendering.
lang on <html> affects screen reader pronunciation and translation tools, not just documentation.
<head> holds metadata that isn't shown directly; <body> holds everything the visitor actually sees.
The viewport meta tag is what stops mobile browsers from rendering your page at desktop width and shrinking it down.
Void elements like <meta>,   and <img> never have a separate closing tag.
HTML collapses whitespace in the source down to single spaces — indentation is for you, not the renderer.

Check yourself

3 questions · pass 3/3 to unlock Text, Headings and Lists

up to 50

1.What does <!doctype html> actually do?
2.Why does the lang attribute on <html> matter?
3.Which of these elements does NOT need a closing tag?

3 left to answer