What Goes in <head>?
The <head> element is not visible on the page. It contains metadata about the document and links to external resources.
<head>
<!-- Required: character encoding -->
<meta charset="UTF-8">
<!-- Required: responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title (shown in tab + search results) -->
<title>My Page — My Site</title>
<!-- SEO description -->
<meta name="description" content="A short description of this page for search engines.">
<!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Preload font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>Key Meta Tags
| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Supports all languages and emoji |
<meta name="viewport" ...> | Makes the site mobile-responsive |
<meta name="description"> | Shown in Google search snippets |
<meta name="author"> | Names the page author |
<meta name="robots"> | Controls search engine indexing |
The two absolute must-haves in every
<head>: <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without viewport, mobile browsers zoom out and show a tiny desktop view.