Capstone: A Complete Page Skeleton
You now know every piece of the frame that surrounds a web page. In this capstone you assemble them into one skeleton, the starting file you will reuse for every page you build. It is short enough to type from memory, and that is the goal.
The rule
Doctype, root, head for the machine, body for the human.
Here is the full skeleton, filled in for a small community garden page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Green Lane Community Garden</title>
<meta name="description" content="Plots, workdays and seed swaps at the Green Lane Community Garden.">
</head>
<body>
<h1>Green Lane Community Garden</h1>
<p>We grow vegetables, herbs and flowers on shared plots. Everyone is welcome.</p>
<p>Next workday: Saturday morning. Bring gloves.</p>
</body>
</html>Walk it from top to bottom and every line has a reason:
- The doctype puts the browser in standards mode.
- The root
htmlwraps everything and declares the language. - The head gives the browser the encoding and viewport, and gives people the title and description.
- The body holds what the visitor actually reads, starting with one
h1that matches the page's purpose.
The indentation is for you, not the browser: whitespace collapses, so nesting children two spaces deeper simply makes the tree easy to see.
The shortcut
Type the skeleton outside in. Write each pair of tags before its contents, so nothing is ever left unclosed.
The frame
<!DOCTYPE html>, then<html lang="en">and immediately</html>.
The trap is copying a skeleton from an old tutorial. Long doctypes, missing viewport tags and lang-less roots are signs of outdated HTML.
Many code editors can type a skeleton for you: in VS Code, typing ! and pressing Tab in an empty HTML file expands into one. That is a fine time saver, but only once you can write it yourself and spot what an expansion gets wrong or leaves out. Read every line it produces, change the lang and title to match your page, and delete anything you do not understand yet.
Drills
Answer fast — trust the rule.
Which of these is the first line of the skeleton?
Which element should be the first child of head?
The browser tab shows the file name instead of a page name. What is missing?
Why is the skeleton indented?
How many direct children does the html element have in a correct skeleton?
Remember
- Skeleton: doctype,
html lang, head (charset, viewport, title, description), body (content). - Shortcut: type outside in, closing each pair before filling it.
- Trap: outdated skeletons without a viewport,
langor the short doctype.