The Head Element
The <head> holds information about the page rather than content on it: the title, character set, viewport settings, stylesheets, scripts, icons and metadata for search engines and social networks. Nothing here is displayed directly, but all of it shapes how the page works.
A complete, modern head
<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lemon Pancakes Recipe — Kitchen Notes</title> <meta name="description" content="Light, zesty lemon pancakes ready in 20 minutes, with tips for making the batter ahead."> <link rel="canonical" href="https://kitchennotes.example/recipes/lemon-pancakes"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="stylesheet" href="/css/styles.css"> <script src="/js/app.js" defer></script> <meta property="og:title" content="Lemon Pancakes"> <meta property="og:image" content="https://kitchennotes.example/img/pancakes.jpg">
(The validator-wrapped version adds <meta charset="utf-8"> as the very first line, which is where it belongs.)
Elements allowed in the head
| Element | Purpose |
|---|---|
<title> | The page title — required, exactly one |
<meta> | Metadata: charset, viewport, description, social cards, theme colour… |
<link> | Linked resources: stylesheets, icons, canonical URL, preloads, manifest |
<style> | CSS written directly in the page |
<script> | JavaScript, inline or external |
<base> | Base URL for relative links (rarely used) |
<noscript> | Fallback when scripts are disabled |
Important meta tags
<title>Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A one or two sentence summary of this page."> <meta name="robots" content="noindex, nofollow"> <meta name="theme-color" content="#d6336c"> <meta name="color-scheme" content="light dark"> <meta name="author" content="Ana Silva">
charset— must come within the first 1024 bytes; alwaysutf-8.viewport— essential for mobile (lesson 43).description— often used as the snippet in search results (next lesson).robots— ask search engines not to index a page (e.g. thank-you pages, internal tools).theme-color— tints the browser interface on some mobile browsers.color-scheme— tells the browser the page supports dark mode, so built-in controls and scrollbars match.
The canonical link
The same page is often reachable at several URLs (with and without www, with tracking parameters, and so on). A canonical link tells search engines which URL is the "real" one, so ranking isn't split between duplicates:
<title>Lemon pancakes</title> <link rel="canonical" href="https://kitchennotes.example/recipes/lemon-pancakes">
Resource hints
<link> can also tell the browser to start fetching things early (lesson 45):
<title>Hints</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> <link rel="prefetch" href="/next-page.html">
Order in the head
A sensible order: charset first, then viewport, then title, then preconnects and preloads, then stylesheets, then scripts (with defer), then the rest of the metadata. Putting the charset first prevents the browser from re-reading the page with a different encoding, and early hints get downloads started sooner.
Language and direction
Strictly, these go on <html>, not in the head, but they're part of every page's setup:
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <title>مرحبا</title> </head> <body> <p>هذه الصفحة باللغة العربية.</p> </body> </html>
Checking a page's head
In developer tools, the Elements panel shows the head, and the Network panel shows each resource it requests. Browser extensions and online "SEO preview" tools can show how a page's title, description and social card will look when shared.