The Head (<head>)

<head> is the first child of <html>, and it holds everything the browser needs to know about the page before — or without — showing it to the user. Nothing inside <head> is rendered directly on the page (with one small legacy exception you'll see below).

What belongs in the head

Element	Purpose
<code><title></code>	Text shown in the browser tab, bookmarks, and search results — required in every valid document
<code><meta></code>	Character encoding, viewport settings, page description, and other metadata
<code><link></code>	References to external resources: stylesheets, favicons, canonical URLs, preloads
<code><style></code>	Inline CSS rules written directly into the page
<code><script></code>	JavaScript — either inline or referencing an external file
<code><base></code>	Sets a base URL that all relative links and resources on the page resolve against

A typical head, in order

HTML

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Acme Store</title>
  <meta name="description" content="Handmade pottery, shipped worldwide." />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="/styles.css" />
  <script src="/analytics.js" defer></script>
</head>

Why order is conventional (not strictly required)

HTML doesn't force a strict order inside <head>, but a widely followed convention exists for good practical reasons:

<code>charset</code> first — the browser needs to know the character encoding as early as possible, ideally within the first 1024 bytes of the file, so it can correctly interpret the rest of the bytes it's reading, including the title.
viewport meta early — affects how mobile browsers begin laying out the page.
<code><title></code> before stylesheets/scripts — ensures the tab title appears quickly even if other resources are slow to load.
Stylesheets before scripts — so styles are ready by the time any script runs and potentially reads layout information.

What does NOT belong in the head

Anything meant to be visually displayed as page content — headings, paragraphs, images, forms — belongs in <body>, not <head>.

A common beginner mistake

Putting a visible <h1> or <img> inside <head> is invalid. Browsers are forgiving and will often silently move that content into <body> during parsing — which means it might *appear* to work, while the underlying document is still invalid and unpredictable across browsers and parsers.

The historical exception: <noscript>

One legacy element, <noscript>, can appear in <head> and does render visible content — but only when JavaScript is disabled in the browser. It's rare to need this today, but you may still encounter it in older codebases.

One title, one document

A page should have exactly one <title> element. Multiple titles are invalid; if more than one exists, browsers simply use the first one and ignore the rest.

With <head> covered, next we look at its sibling — <body> — where everything the user actually sees and interacts with lives.