Document Structure

Every HTML page shares the same skeleton: a doctype, an <html> element, a <head> with information about the page, and a <body> with the content people see. This lesson explains each part and why it matters.

The standard skeleton

HTML index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lemon Pancakes — My Recipe Blog</title>
  <meta name="description" content="A quick recipe for light, zesty lemon pancakes.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Lemon Pancakes</h1>
  <p>Light, fluffy and ready in 20 minutes.</p>
</body>
</html>

Line by line

Code	Purpose
`<!DOCTYPE html>`	Tells the browser to use modern, standards-compliant rendering. Without it, browsers fall back to "quirks mode", which imitates 1990s bugs. Always the very first line.
`<html lang="en">`	The root element containing everything else. `lang` declares the page's language, used by screen readers for pronunciation, by translation tools and by search engines.
`<head>`	Metadata: information about the page that isn't shown as content.
`<meta charset="utf-8">`	The text encoding. UTF-8 supports every language and emoji. Put it early in the head.
`<meta name="viewport" …>`	Makes the page display at the correct size on phones (lesson 43).
`<title>`	Shown in the browser tab, bookmarks and search results. Required.
`<meta name="description">`	A summary that search engines may show under the title (lesson 35).
`<link rel="stylesheet">`	Loads a CSS file (lesson 36).
`<body>`	Everything visible on the page.

The head vs the body

A useful way to think about it: the <head> is for browsers, search engines and social networks; the <body> is for people. Content placed in the head won't be displayed, and metadata placed in the body won't work properly.

The title matters

A good title is specific and unique for each page, with the most important words first: Lemon Pancakes — My Recipe Blog is better than Home or My Recipe Blog — Recipes — Lemon Pancakes. It's what people see in a row of tabs and in search results.

The document tree

HTML elements nest inside each other, forming a tree. The browser builds this tree — the DOM — when it reads the page:

TXT DOM tree

html
├── head
│   ├── meta
│   ├── title
│   └── link
└── body
    ├── h1
    └── p

Every element (except <html>) has exactly one parent. Elements inside it are its children; elements sharing a parent are siblings. CSS selectors and JavaScript both rely on this family tree.

Try it yourself

Change the title and the language, and add content to the body. (The tab title won't change here, because the preview is embedded in this page.)

What if you leave things out?

Browsers are forgiving: if you omit <html>, <head> or <body>, they insert them automatically. Technically HTML allows omitting those tags. But always include the doctype, lang, charset, viewport and title — leaving those out causes real problems with rendering, accessibility and mobile display.

Note: HTML tag names aren't case-sensitive (<BODY> works), but the universal convention is lowercase.

PreviousYour First Page NextElements & Tags