An HTML file looks like markup once you know the vocabulary, but every line in a complete page is doing a job — declaring the document type, setting the character encoding, sizing the viewport for phones, giving the page a title. Here is the whole structure, one piece at a time.
What does a complete page look like?
This is the smallest page that is still complete and correct.
<!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>
<h1>Hello, world</h1>
<p>Everything visible goes in the body.</p>
</body>
</html>
Four top-level pieces: the doctype, the html element, and its two children head and body. The head holds information about the page; the body holds the page itself.
What does the doctype do?
The first line is not decoration. It tells the browser which parsing rules to use, and it must be the very first thing in the file — not even a comment or a blank line before it.
<!doctype html> modern standards mode: the parser follows the current rules
(no doctype) quirks mode: the browser guesses, and old bugs come back
Without a doctype, browsers fall back to quirks mode, where layout rules from decades ago are applied to a few elements. A page can look different in quirks mode for no reason you can see in the code. Modern HTML has exactly one doctype, and it is not optional.
What belongs in the head?
The head is metadata: things the browser and other software need, rather than things the reader sees.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="What this page is about, in one sentence.">
<title>The page title</title>
<link rel="stylesheet" href="/styles.css">
<link rel="icon" href="/favicon.ico">
</head>
charsetmust be the first thing in the head, within the first 1024 bytes. It decides how bytes become characters, and getting it wrong produces the classic mojibake — symbols like a run of odd characters where an accented letter should be.viewportis what makes a page respond to phone screens. Without it, mobile browsers assume a fixed wide layout and scale it down, so your text is tiny and unreadable.titleis the only element in the head that a reader sees — it is the tab label, the bookmark name, and the headline search engines show.descriptionis the summary under the title in search results. It is not a ranking factor; it is a click-through factor.linkattaches the stylesheet and the favicon, and preloads resources the page will need.
Why does the html element carry a language?
The lang attribute tells the browser and assistive technology which language the text is in. It changes how a screen reader pronounces words, how the browser decides whether to offer translation, and how text-to-speech handles the page. It is also useful for CSS, because you can then style rules for a specific language.
<html lang="en">
<body>
<p lang="fr">Une phrase dans une autre langue</p>
</body>
</html>
What goes in the body?
Everything a reader can perceive: headings, paragraphs, images, links, forms, and the scripts that make the page interactive. The body has no required attributes, and adding presentational attributes to it — a background colour, a width — is a sign that the styling belongs in a stylesheet instead.
How do elements nest?
Elements nest by containment, and the document tree is what everything else operates on: the CSS selector body > p means a paragraph that is a direct child of the body, and the browser's accessibility tree is derived from the same structure.
<body>
<section> <!-- a direct child of body -->
<p>Directly inside the section.</p>
<div>
<p>Nested one level deeper.</p>
</div>
</section>
</body>
Tags must be closed in the right order: the last tag opened is the first one closed. Browsers are forgiving about mistakes and will try to repair a broken page, which is exactly why a broken page can look almost right while behaving strangely — the repair rules are not obvious, so never rely on them. Close your tags properly and the page behaves the same in every browser.
What does the viewport meta tag actually do?
It is two settings in one attribute. width=device-width says the layout viewport is as wide as the screen, so a page can lay out against real pixels instead of a fictitious 980-pixel canvas. initial-scale=1 says the page starts at one device pixel per CSS pixel, so text is the size you designed rather than a scaled-down postage stamp.
<meta name="viewport" content="width=device-width, initial-scale=1">
Both parts matter. With the width setting alone, a phone lays out a wide page and then scales it down, so everything is small. With the scale setting alone, the width is still the fictitious one, so you get a wide page that scrolls sideways. Together they give you a layout that behaves like the desktop one you built, scaled to the screen.
Do comments and whitespace matter?
Comments never render, and they are free in terms of performance. Use them to explain why something is there rather than what the markup says — the markup already says what it is.
<!-- a comment is invisible to the reader and to the browser -->
<section class="promo">
<!-- The order of these two fields matters: the total depends on both. -->
<input type="number" id="quantity">
<input type="number" id="unit-price">
</section>
Whitespace between elements does matter, but only in one place: inside a <pre> block, spaces and line breaks are preserved exactly as you wrote them. Everywhere else, HTML collapses runs of whitespace into a single space, which is why you never see accidental gaps in a paragraph but you do see them in code samples.
Quick reference
- The doctype goes first, on its own line, and puts the page in standards mode.
headholds metadata,bodyholds content. Nothing else belongs at the top level.charsetfirst,viewportfor mobile,titlefor humans and search engines.langonhtmlchanges pronunciation, translation and styling.- Close tags in reverse order of opening; never rely on browser repair.
Try it yourself: write a page with a doctype, charset, viewport, a description and a title, and check each one in the developer tools: find your title in the tab, find the description by searching for it in the page source, and remove the viewport line to see the mobile layout change.