The <head> aggregates metadata: character encoding, viewport behavior, title, social sharing tags, discovery feeds, stylesheets, preloads, and scripts when necessary.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing — Example Co</title>
<meta name="description" content="Compare plans side-by-side.">
<meta property="og:title" content="Pricing">
<link rel="canonical" href="https://example.com/pricing">
<link rel="stylesheet" href="/app.css">
</head>Critical tags explained
- charset: early declaration avoids incorrect decoding.
- viewport: maps CSS pixels to device width on mobile.
- title: influences tabs, bookmarks, and often SERP titles.
- meta description: may appear as snippets—write human sentences.
- Open Graph / Twitter: customize previews when sharing URLs.
Rules
- Do not place visible body content inside
head; parsers relocate stray tags unpredictably. - Prefer declarative links (
link) over imports injected via scripts when possible.
What production teams miss
- SEO/social duplication: inconsistent
titlevs OG tags confuses previews—treat metadata as contractual copy with marketing/legal. - Prefetch abuse: preloading every route starves bandwidth—coordinate with perf budgets.
- Fingerprinting leakage: third-party widgets inject their own meta/link tags via JS—inventory them in security reviews.
Performance ordering
charset, viewport, and critical preconnect hints should arrive early—large inline JSON blobs in head push discovery later and harm FCP psychologically even if parsers cope.
Important interview questions and answers
- Q: What makes image delivery accessible and performant?
A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs. - Q: When do you use a table in HTML?
A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech. - Q: What is the role of the `head` element in production apps?
A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.
Pitfall: Missing viewport meta makes mobile layouts look zoomed out.