Charset and Viewport Meta Tags
Two meta tags belong on virtually every HTML page ever published: the character encoding declaration and the viewport tag. One controls how bytes turn into text; the other controls how your layout behaves on mobile devices.
Declaring the charset
<meta charset="UTF-8" />
This single line tells the browser which character encoding to use when turning the raw bytes of your HTML file into text. UTF-8 is the universal modern standard — it can represent virtually every character and emoji in every language, so there is essentially never a reason to use anything else today.
Why it must come first
Browsers need to know the encoding before they parse anything else that contains text — including the <title>. The HTML spec requires the charset meta tag to appear within the first 1024 bytes of the document, and the safest, simplest rule is: make it the very first child of <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- everything else comes after -->
<title>My Page</title>
</head>
<body>...</body>
</html>The viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Without this tag, mobile browsers assume your page was built for a desktop screen (traditionally around 980px wide) and shrink the whole layout down to fit, forcing users to pinch-zoom to read anything. The viewport tag opts your page into real responsive behavior.
Breaking down the values
Value | Meaning |
|---|---|
width=device-width | Set the layout viewport's width to match the device's actual screen width in CSS pixels |
initial-scale=1.0 | Set the initial zoom level to 1:1 — one CSS pixel equals one viewport pixel |
minimum-scale / maximum-scale | Optionally constrain how far a user can pinch-zoom (use sparingly) |
user-scalable=no | Disables pinch-zoom entirely — avoid this, it is an accessibility problem |
width=device-width makes your CSS media queries (min-width/max-width) match real device sizes.
initial-scale=1.0 prevents the page from loading pre-zoomed out.
Together they are the foundation every responsive design relies on.
user-scalable=no or very restrictive maximum-scale values. Preventing zoom blocks low-vision users from enlarging text, which is both an accessibility failure and, in many jurisdictions, a compliance issue.