Document Metadata & The <head>
15 min read
meta charsetviewporthead tagtitle tagmeta descriptionfavicon
Mastering the <head> Element
The <head> is invisible to users but critical for browsers, search engines, and social media. Every line matters.
Essential Meta Tags
| Tag | Purpose | Impact |
|---|---|---|
<meta charset="UTF-8"> | Character encoding | Without it, special characters break |
<meta name="viewport"> | Mobile responsiveness | Without it, mobile shows desktop layout |
<title> | Browser tab + SEO title | #1 on-page SEO factor |
<meta name="description"> | Search result snippet | Affects click-through rate |
<link rel="icon"> | Favicon | Brand recognition in tabs |
The Viewport Meta Tag Explained
<meta name="viewport" content="width=device-width, initial-scale=1">
- width=device-width: Sets viewport width to the device width (not 980px default)
- initial-scale=1: Sets initial zoom level to 100%
- Never use maximum-scale=1: It disables pinch-to-zoom, which is an accessibility violation
Document Type Declaration
<!DOCTYPE html> tells the browser to use standards mode, not quirks mode. Without it, box model calculations and CSS rendering behave unpredictably across browsers.
Meta Robots
Control how search engines treat your page:
index, follow— Default. Crawl and index everything.noindex— Do not show in search results.nofollow— Do not follow links on this page.noarchive— Do not show a cached version.