Meta Charset and Viewport

The <meta charset="UTF-8"> declaration tells the browser which character encoding to use. UTF-8 covers virtually all characters from all languages and is the strongly recommended encoding for all HTML documents. It must appear as early as possible in <head> — within the first 1024 bytes.

The Viewport Meta Tag

The viewport meta tag controls how the page is displayed on mobile devices. Without it, mobile browsers render the page at a desktop-scale width and then scale it down, making text tiny. The standard declaration width=device-width, initial-scale=1.0 sets the width to the device's screen width and sets the initial zoom level to 100%. Never set user-scalable=no — it prevents users from zooming and is an accessibility violation.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- MUST be first in <head>, before <title> -->
  <meta charset="UTF-8">

  <!-- Standard responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Charset &amp; Viewport</title>
</head>
<body>
  <p>This page uses UTF-8 encoding, so it can display:
    Japanese: 日本語,
    Arabic: العربية,
    Emoji: 🌍
  </p>

  <p>And it responds correctly to the device screen width.</p>

  <!--
    AVOID this — it prevents user zooming:
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1,
                   user-scalable=no">
  -->
</body>
</html>

HTML

Full Editor

Pro Tip

Always place <meta charset="UTF-8"> as the very first element inside <head> — if the browser encounters a character it cannot interpret before knowing the charset, it may render the page incorrectly.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned