The skeleton of every page

Introduction

In the last lesson you wrote a few elements and the browser showed them. That worked only because the browser quietly filled in the rest. A real page should not depend on guesses, so professional HTML always starts from the same small frame. Once you have memorised this frame, you will type it without thinking for the rest of your career.

How it works

The frame has four parts.

The doctype. <!doctype html> is not an element. It is a signal to the browser: "this page uses modern rules". Without it, browsers fall back to quirks mode, an old behaviour kept so that pages from the 1990s still work. In quirks mode, sizes and spacing are calculated differently, and your CSS may behave strangely.

The html element wraps everything else. Its lang attribute names the language of the page. Screen readers use it to choose the right voice, and browsers use it to offer translation.

The head holds information about the page. Nothing in it appears in the page area. It contains the title (shown in the browser tab and in search results), links to CSS files, and meta elements.

The body holds everything the visitor sees.

Two meta lines belong on every page, and each solves a real problem:

<meta charset="utf-8"> says how the file's bytes turn into letters. Without it, a name like "Zoë" or text in Bangla can appear as garbage. It must come early in the head, because the browser needs to know before reading further.

<meta name="viewport" content="width=device-width, initial-scale=1"> is for phones. Phones were built to show old desktop sites by pretending to be about 980 pixels wide and shrinking the result. This line says "my page is designed for your real width".

An attribute such as lang="en" adds information to an opening tag. It is a name, an equals sign, and a value in quotes.

Syntax

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The page title</title>
  </head>
  <body>
    <!-- everything the visitor sees -->
  </body>
</html>

The text between <!-- and --> is a comment: a note for people, which the browser ignores.

Example

Line by line

1. <!doctype html> selects standards mode.
2. <html lang="en"> opens the document and says it is in English.
3. <head> opens the part that is not displayed.
4. <meta charset="utf-8"> makes the "é" in "Café" display correctly.
5. <title> sets the words in the browser tab.
6. <body> opens the visible part; the heading and paragraph are the only things you see.

Expected result

A heading and a paragraph with "Café" spelled correctly. The title does not appear on the page itself, because it belongs in the tab.

In the real world

The title is usually the blue headline of your page in a search result, so a vague title such as "Home" costs real visitors. Frameworks like Next.js generate this frame for you, but they are still producing exactly these elements, and you will need to read them when something goes wrong.

Common mistakes

• Putting visible content in the head. A p in the head makes the browser end the head early.
• Leaving out the viewport line. The page looks tiny on phones.
• Using two body elements. A document has exactly one head and one body.

Best practices

• Keep a copy of this frame and start every page from it.
• Put the charset line first in the head.
• Write a title that describes this page, not just the site.
• Set lang to the real language of the content.

Summary

Every document starts with a doctype, then one html element holding one head and one body. The head describes the page, and the body is the page. The charset and viewport lines prevent two problems that are easy to overlook on your own computer.

Mark lesson complete