The HTML Document Skeleton

The fixed five-line frame every web page starts from: a doctype, an html root, and a head and body inside it.

HTML5 min readConcept 1 of 42

What it is

Every HTML page begins from the same small frame. A <!DOCTYPE html> line at the very top, an <html> root element that wraps everything, and inside it two children: a <head> and a <body>. That is the skeleton, and every page you ever build lives inside it.

The split between <head> and <body> is the whole idea. The <head> is the setup the reader never sees, and the <body> is the content they do. Once that frame is in place, the rest of HTML is just filling in the body.

Why it matters

This is the first thing you type on any page, so getting it right is the foundation everything else rests on. When the frame is correct, the browser reads your page in standards mode and your HTML behaves the way the modern rules say it should.

It also gives you the mental model the whole language hangs on: invisible setup in the head, visible content in the body. Almost every beginner bug about something not showing up, or showing up in the wrong place, comes back to mixing those two up.

How it works

<!DOCTYPE html> comes first, before anything else. It is not really a tag and it has no closing tag; it is a short instruction that tells the browser to use the current HTML standard. It looks like a leftover from history because it is one, but you always include it.

Next is <html lang="en">, the root element that contains the entire page. The lang attribute names the page's language, which helps screen readers pronounce text correctly and helps browsers offer translation.

Inside <html> the <head> always comes before the <body>. The <head> holds metadata such as <meta charset="utf-8"> and the <title>, none of which is drawn on the page. The <body> then holds everything the visitor actually sees, from headings and paragraphs to images and buttons.

See the structure

The same five-line skeleton, assembled piece by piece. Notice how the <head> stays invisible setup while only the <body> shows up on the page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<h1>Hello!</h1>
<p>My first web page.</p>
</body>
</html>
My Pagebrowser tab
<html lang="en">
head · not shown to the user
meta charsettitle: My Page
body · visible

Hello!

My first web page.

The head holds setup the visitor never sees; only the body is drawn on the page.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What does <!DOCTYPE html> actually do?
  2. 2Where does the content a visitor can see belong?
  3. 3In what order do <head> and <body> go inside <html>?

Remember this

  • Every page starts with <!DOCTYPE html>, then <html>, holding <head> then <body>.
  • <!DOCTYPE html> opts into standards mode; leave it out and the browser falls back to quirks mode.
  • The <head> holds metadata the user never sees; the <body> holds everything visible.
  • Set lang on <html> and <meta charset="utf-8"> in the head from the very start.

Done with this concept?

Mark it complete to track your progress. No login needed.