Head Section
Definition
Every HTML document has two children inside <html>: head and body. The head carries information about the page rather than content of it. Typical contents are <title>, which names the tab and the search result; <meta charset="utf-8">, which fixes the character encoding; <meta name="viewport" content="width=device-width, initial-scale=1">, without which a phone renders the page at desktop width and shrinks it; <link rel="stylesheet" href="styles.css">; <link rel="icon"> for the favicon; and Open Graph tags for link previews. Scripts can live here too, usually with defer. The one thing that does appear on screen from the head is the title, in the browser tab.
Why It Matters
Most of the page-level things people complain about are head problems. A missing viewport meta tag is the single commonest reason a responsive layout still looks like a shrunken desktop page on a phone — the media queries are fine, the browser simply never told them the real width. A missing charset turns curly quotes and accented names into mojibake. An absent or duplicated title costs you the one line a search result shows, and no Open Graph tags means a link shared in Slack or on LinkedIn appears as a bare grey URL. None of these throw an error; they just quietly underperform.
How It Works
The parser reads the head before any content is painted, which is why what goes in it affects how fast the page appears. A stylesheet linked here is render-blocking: the browser will not draw until it has downloaded and parsed the CSS, so an unreachable stylesheet URL means a white screen rather than an unstyled page. A plain <script src> in the head blocks parsing at that point; adding defer lets parsing continue and runs the script once the document is ready. Character encoding is read from the first kilobyte, so charset belongs in the first few lines, ahead of the title. Order otherwise matters only for the stylesheets, where later files override earlier ones.
Real-World Example
A freelancer publishes a one-page CV at ada-lovelace.99helpers.site and finds it readable on a laptop but tiny on a phone, with the whole layout zoomed out. The CSS contains proper media queries; the head has no viewport meta tag, so mobile Safari assumes a 980px canvas and scales it down. Adding the one meta line makes the phone report its real width and the existing breakpoints take effect immediately. While in there, a title and a meta description turn a bare URL in search results into something worth clicking.
Common Mistakes
- ✕Leaving out the viewport meta tag and then rewriting the CSS — the breakpoints were never wrong, the browser was reporting a fictional width
- ✕Putting visible content such as a heading or a paragraph inside head — the browser closes the head for you and the result is a body you did not write
- ✕Linking a stylesheet that returns a 404 — because CSS is render-blocking, visitors see a blank page while the request fails rather than an unstyled one
Related Terms
Doctype
The doctype is the single line <!DOCTYPE html> at the very top of an HTML file. It tells the browser to render the page by modern standards instead of falling back to quirks mode, where old layout bugs are deliberately reproduced.
Stylesheet
A stylesheet is the set of CSS rules that tells the browser how a page should look. It is usually a separate .css file linked from the head, though it can also sit in a style element inside the HTML itself.
Render-Blocking Resource
A render-blocking resource is a file the browser has to download and process before it can show anything at all. Stylesheets and ordinary script tags in the head block; almost nothing else does.
Viewport Meta Tag
The viewport meta tag is one line in the head of an HTML document that tells a mobile browser to lay the page out at the device's own width instead of pretending to be a desktop screen.
Open Graph Tags
Meta tags in the head of a page that tell other sites how to draw a link to it — the title, the summary and the picture in a shared card. Without them a link shows as a bare URL.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →