The Shape of Every HTML Document

What this is. Every HTML document has the same skeleton. Learn it once and you never have to think about it again.

<!doctype html> tells the browser to use modern standards.

<html> is the root element that contains everything.

<head> holds information about the document: its title, its character encoding, its stylesheets. None of it is displayed on the page.

<body> holds everything the visitor actually sees.

Why the head matters even though it is invisible. The <title> is what appears in the browser tab and in search results. The charset declaration prevents accented characters and quotation marks turning into nonsense. The viewport line is what makes a page usable on a phone, and leaving it out is one of the most common reasons a site looks broken on mobile.

✦ The lang attribute is not decoration

lang="en" tells a screen reader which language to pronounce, tells the browser which dictionary to use, and tells translation tools what they are working with. It is one attribute and it materially changes who can use your page.

When you write this. Every single time you create a new page. Most editors will generate it for you, but you should be able to type it from memory, because when something is broken you need to recognize what is missing.