The Doctype and Document Skeleton

Every HTML page starts with a doctype and a small skeleton — `<html>`, `<head>`, `<body>`. A handful of meta tags belong in the head from the start.

3 min read Level 1/5 #html#doctype#document

What you'll learn

Recognize the standard HTML5 doctype
Know what goes in `<head>` vs `<body>`
Add the essential meta tags

Every HTML page starts the same way — a doctype that tells the browser “this is HTML5”, and a small skeleton.

The Minimal Skeleton

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

That’s the shape of every HTML page. Memorize it.

What Each Piece Does

Line	Purpose
`<!doctype html>`	”This is HTML5”. Required.
`<html lang="en">`	The root element; `lang` helps screen readers and search engines
`<head>`	Metadata — not shown on the page
`<meta charset="utf-8" />`	Tell the browser the encoding (essential for non-ASCII characters)
`<meta name="viewport" ...>`	Mobile sizing — without this, the page looks zoomed-out on phones
`<title>`	The text in the browser tab (and search results)
`<body>`	The actual visible content

`<head>` vs `<body>`

The head is metadata: title, character encoding, links to CSS, SEO/social tags. None of it shows on the page.

The body is the page content: headings, paragraphs, images, buttons, everything the user sees.

The Viewport Meta Tag

Without this line:

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

…mobile browsers assume the page is ~980px wide, and they zoom out to fit. With it, the page renders at the device’s actual width — the basis of responsive design.

A Sensible Default Head

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Site — Home</title>
  <meta name="description" content="What this page is about, for search engines" />
  <link rel="icon" href="/favicon.svg" />
  <link rel="stylesheet" href="/styles.css" />
</head>

Add OG/social meta and analytics later. The above is enough to start.

Up Next

The building blocks — elements and tags.

Elements →