The shape of a document
Doctype, html, head, body, charset, viewport — what each part is for and why skipping one bites later.
You write a single line of HTML in a file, save it as index.html, double-click it, and the browser shows your text. That works. But every real web page out there starts with five or six lines you did not write — a sort of standard wrapper around the content. Look at any site's source and you will find the same skeleton. This lesson is about why that skeleton exists and what each piece does.
The skeleton
Here is the smallest sensible HTML document. Keep this in front of you for the rest of the lesson — every section below picks one piece apart.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My first page</title> </head> <body> <h1>Hello</h1> <p>This is my page.</p> </body> </html>
Reading top to bottom: the first line is a quick note to the browser saying "this file is HTML". Then everything is wrapped inside one big <html> tag. Inside <html> are two children: <head> (settings about the page) and <body> (the actual visible content). Each of those has small extras inside.
A useful picture: the document is like an envelope. The doctype is the stamp on the outside saying which postal service to use. The <html> tag is the envelope itself. The <head> is the address slip and any handling notes ("fragile", "this side up"). The <body> is the letter inside that the recipient reads.
The doctype line
The very first line, <!doctype html>, looks a bit alien. It does not look like the other tags — there is no closing version, and there is an exclamation mark. That is because it is not really a tag. It is a one-time signal to the browser: "render this file using the modern HTML rules".
The reason this line exists is historical. Old browsers had two rendering modes: a strict one for new pages and a weird "quirks mode" for very old pages from the 1990s. The doctype tells the browser which mode to use. If you leave the doctype off, the browser falls into quirks mode and your CSS will quietly behave in surprising ways — boxes will be the wrong size, margins will collapse differently, and you will not be told why.
<!-- broken: no doctype --> <html> <head><title>Oops</title></head> <body> <p>Margins and box sizes here will follow 1998 rules.</p> </body> </html>
The page above will still load. It will look almost right. But anyone trying to style it later will lose hours figuring out why their layout is half a pixel off. Just put <!doctype html> on line 1 and forget it ever existed.
The casing does not matter — <!doctype html> and <!DOCTYPE html> work identically. Use whichever your editor inserts by default.
Head vs body
Now the two children of <html>. They look similar at first glance, but they hold very different things.
The head is for information about the page — things the browser, search engines, and social-media link previewers need to know, but that are not part of the visible content. The page title, the language, the character set, links to stylesheets, links to icons, descriptions for search results. Nothing inside <head> is rendered on the page itself.
The body is for the actual content the visitor sees — every heading, paragraph, image, link, button, form, and so on. If you can read it on the page, it lives in the body.
Mixing these up is the most common mistake in handwritten HTML. People put <title> inside <body> (it does nothing useful there), or put a heading inside <head> (the heading vanishes from the page). The rule of thumb: if a human is supposed to read it on the page, it goes in the body.
<!doctype html> <html lang="en"> <head> <title>About</title> <h1>About us</h1> <!-- wrong: h1 belongs in body --> </head> <body> <title>About</title> <!-- wrong: title belongs in head --> <p>We make things.</p> </body> </html>
When the browser sees this it will quietly relocate the misplaced tags to where they should be (remember the forgiving parser from the last lesson). The page might even look fine. But the structure will not match what you wrote, and anything reading the source — a screen reader, a crawler, a future you — will be confused.
<link rel="stylesheet" href="styles.css"> to load your CSS. Where should it go?Charset and viewport
Inside <head> you will see two <meta> lines on almost every page. They look similar but solve very different problems. Both are worth understanding, because skipping either one breaks the page in ways you might not notice on your own machine.
The first one declares the character set — which set of letter-and-symbol rules the file is written in. A character set is the agreement between your editor (which saves the file) and the browser (which reads it) about how to turn raw bytes back into letters. UTF-8 is the modern standard. It covers every language and every emoji.
<meta charset="utf-8">
If you skip this line and your file contains anything beyond plain English — accented characters, curly quotes, an emoji, anything in Arabic, Cyrillic, or Chinese — the browser may guess the wrong set and your text turns into nonsense like "café" appearing as "café". Putting the line in costs nothing; leaving it out costs hours.
The second one is the viewport declaration. The viewport is the visible area of the browser window — the rectangle where your page is shown. On a desktop that is the whole window. On a phone, browsers used to pretend the viewport was 980 pixels wide and shrink the page to fit, which made everything tiny.
<meta name="viewport" content="width=device-width, initial-scale=1">
That line tells the browser: use the actual width of the device, and do not zoom out. Without it, your responsive layouts will not be responsive on a phone — the phone will render your page as if it were a tiny desktop and zoom out, ignoring your mobile-friendly CSS.
A short analogy: the charset line tells the browser which language the file is in; the viewport line tells the browser which size of paper to print on. They are unrelated, but both live in the head and both have to be right.
If your responsive site looks fine on your laptop but tiny and zoomed-out on a phone, the viewport meta line is almost certainly missing or wrong. It is the single most common omission in handwritten HTML.