LearnHTML.net

Explore

LearnHTML.net

Quick find

Search lessons, patterns, and prompts

Open full search
SearchPrompt Builder

Reference · Beginner

The head element

head holds the document metadata a browser needs before rendering: charset, title, viewport, stylesheets, and canonical declarations.

Published
Last checked

What it is

head is the first child of html and holds metadata about the document rather than content shown in the page. Browsers read it before rendering anything, which is why what goes in it and in what order both matter.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Contact — Riverside Plumbing</title>
  <link rel="canonical" href="https://example.com/contact" />
  <link rel="stylesheet" href="/styles.css" />
</head>

What belongs in it

Only metadata content belongs here, including title, meta, link, style, script, base, noscript, and template. Visible content does not belong in the head. In an HTML document, a body-only element such as p can make the parser close the head and reprocess that element in the body, so the resulting DOM may not match the source's indentation.

Ordering constraints to know

Most of the head is order-independent, but two standard features have explicit placement constraints.

The meta element declaring charset must appear within the first 1024 bytes of the document, and putting it first is the simplest way to guarantee that. Until the browser knows the encoding it may guess, and a wrong guess turns non-ASCII text into replacement characters.

If a base element has an href, it must precede elements whose attributes contain URLs so those URLs resolve from the intended base. Most small sites do not need base; relative URLs resolve against the document URL without it.

Place the viewport declaration with the other essential metadata and verify its effect on a real phone and under zoom. Unlike charset and base, it has no special ordering rule in the HTML content model. Its value matters more than an arbitrary line position: a declaration that restricts scaling can interfere with readers who need magnification.

An external stylesheet that applies to the current media can block rendering until it loads. That prevents an unstyled first paint, but too many blocking resources delay the first useful paint. Keep only justified resources in the critical path and measure the deployed result.

The minimum viable head

For an indexable responsive small site, four declarations are a practical starting point: charset, viewport, title, and a canonical URL. The canonical is a search-management choice rather than an HTML validity requirement. Add icons, social metadata, preconnects, or structured data only for a specific need.

Heads accumulate. Every declaration adds maintenance and processing work, and resource-bearing entries may add network requests. Review the deployed head periodically instead of assuming every old entry is still necessary.

Accessibility

Nothing in head is rendered, but its contents shape the experience immediately. The title provides an important orientation cue. The viewport declaration influences how a mobile browser maps the page into its viewport. Treat user-scalable=no or a restrictive maximum scale as a warning, then test that text can reach 200 percent and ordinary content reflows at the WCAG width equivalent without losing information or functionality.

Common failures

  • Visible content placed inside head, silently ending it early.
  • A missing or late charset, producing mojibake in non-ASCII text.
  • A viewport declaration that sets user-scalable=no or a maximum scale, blocking zoom.
  • Duplicate title or canonical elements from templates that append rather than replace.
  • Render-blocking stylesheets and scripts accumulating until first paint suffers.

Verify it

View source on the deployed page — not your template — and read the head from the top. Confirm charset appears first, exactly one title and one canonical exist, and nothing visible has crept in. The rendered DOM in developer tools will show you where the parser actually decided the head ended.