The HTML Head Element

If <body> is the stage where your page performs, then <head> is backstage: the crew room, the lighting plan, the script, and the sound check. The audience never sees it, but without it, the show does not start properly.

The <head> element is a container for metadata and for links to the files the page needs. In this lesson you learn what belongs there, what does not, and (importantly) what the browser quietly does when you get it wrong.

What You Will Learn

• What the <head> element is for
• Which elements are allowed in the head
• What happens when something not allowed appears there
• A sensible order for head elements
• How script loading (defer, async, module) affects speed
• How head elements are managed in a Docusaurus site

The Big Idea

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bread Bin | Sourdough for Beginners</title>
  <meta name="description" content="A gentle guide to your first loaf.">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/site.css">
  <script src="/js/app.js" defer></script>
</head>
<body>
  <h1>Sourdough for Beginners</h1>
</body>
</html>

Try the four sample buttons. Notice what the browser's parser does with the "div in the head" example: it ends the head early, and the <meta name="description"> that came after the <div> is no longer in the head.

What the Head Is For

The head answers questions the browser asks before it shows anything:

Question	Answered by
How do I read these letters?	<meta charset>
How wide is the screen?	<meta name="viewport">
What is this page called?	<title>
What does this page say about itself?	<meta name="description"> and others
What should it look like?	<link rel="stylesheet"> and <style>
What should it do?	<script>
What picture represents it?	<link rel="icon">
Where do relative links start?	<base>

What Is Allowed in the Head

Only these elements may appear directly inside <head>:

Element	Notes
<title>	Exactly one, required
<meta>	As many as you need
<link>	As many as you need
<style>	CSS inside the page
<script>	JavaScript or data
<base>	At most one
<noscript>	Allowed in the head, but it may only contain <link>, <style>, and <meta> there
<template>	A fragment of markup that script can use later

Comments are also fine.

Rules You Should Know

1. Exactly one <title>, and it must contain only text.
2. At most one <base>, and it should come before anything that uses a relative address.
3. <meta charset> must be within the first 1024 bytes of the file.
4. Do not put visible content in the head. No <div>, <p>, <img>, or loose text.

What Happens When You Break the Rules

The HTML parser never gives up. It repairs the page. When it meets an element that does not belong in the head, it assumes the head is finished, silently creates the body, and carries on from there.

<head>
  <title>My Page</title>
  <div>Oops</div>                       <!-- the head ends here -->
  <meta name="description" content="…"> <!-- now in the body: ignored by search engines -->
</head>

The result is a page that looks fine, but where some of your metadata does nothing. These bugs are hard to spot, which is why the Parser Lab above is worth experimenting with.

Common causes:

• A stray <div> or text typed in the head
• A JavaScript snippet that writes markup into the head
• A third-party snippet that includes a <noscript><img …></noscript> in the head (an <img> is not allowed there, so it ends the head)
• A missing closing tag, such as an unclosed <title>, which swallows the next lines as title text

An unclosed <title> swallows your page

If you forget </title>, the browser treats everything that follows as part of the title, until it finds a closing tag. Always check that your tags are closed.

Do I Need to Write <head>?

Technically, the start and end tags of <head> are optional if the first thing inside is an element. The browser will create the head anyway, as the "No head tag" sample shows.

But write them anyway. Explicit tags make the structure obvious to people, avoid edge-case surprises, and match what every tool and tutorial expects.

A Sensible Order

Order is mostly flexible, but this arrangement avoids problems and helps the page load quickly:

<head>
  <!-- 1. Encoding first, within the first 1024 bytes -->
  <meta charset="utf-8">

  <!-- 2. Viewport and title -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title | Site name</title>

  <!-- 3. Other metadata -->
  <meta name="description" content="…">
  <link rel="canonical" href="https://example.com/page">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- 4. Styles, so rendering can start early -->
  <link rel="stylesheet" href="/css/site.css">

  <!-- 5. Scripts last, with defer -->
  <script src="/js/app.js" defer></script>
</head>

Why this order?

• The browser must know the encoding before it reads text.
• Styles should arrive early, so the page appears styled the first time.
• Plain scripts block the page while they download and run, so they come late, or use defer.

Scripts and Speed

A script in the head can pause the page. Try the simulation: choose each loading style, and compare when the first content appears.

script-loading.html

<!-- Blocks the page while it downloads and runs -->
<script src="/js/app.js"></script>

<!-- Downloads in the background, runs after the page is read, in order -->
<script src="/js/app.js" defer></script>

<!-- Downloads in the background, runs as soon as it arrives, in any order -->
<script src="/js/analytics.js" async></script>

<!-- A module: deferred by default -->
<script type="module" src="/js/main.js"></script>

A rule of thumb: use defer for scripts that need the page, and async for independent scripts (such as analytics) that do not depend on anything. The Script lesson explains this in detail.

The Head and Your Docusaurus Site

On this documentation site, you rarely write a <head> by hand. Docusaurus builds it for you, and gives you places to add to it:

• Site-wide: docusaurus.config.js has headTags, stylesheets, scripts, and favicon.
• Per page: the frontmatter fields title, description, keywords, and image become the title and meta tags for that page.
• Custom tags in a component: import Head from @docusaurus/Head, and place <meta> or <link> inside it.

import Head from '@docusaurus/Head';

export default function Example() {
  return (
    <Head>
      <meta name="robots" content="noindex" />
    </Head>
  );
}

The tags you write are merged into the page's real <head> when the site is built. Understanding what the head is for helps you use those settings well.

Good Habits

1. Write <head> and </head> explicitly.
2. Put charset first, then viewport and title.
3. Give every page its own <title> and description.
4. Keep the head light: only what the page truly needs.
5. Load scripts with defer unless you have a reason not to.
6. Close every tag, especially <title>.
7. Check your page in a validator, and with your browser's developer tools.

Accessibility Checklist

• The page has exactly one meaningful <title>.
• lang is set on <html>.
• The viewport tag does not block zooming.
• Styles that provide focus outlines and contrast load reliably (and are not behind a blocking script).
• Scripts do not delay the page so much that assistive technology waits for content.
• If a script sets the title, it updates it on each page or screen change in a single-page app.

Security and Privacy Notes

• The head is public. Do not put secrets in comments, meta tags, or inline scripts.
• Every external <script> and <link rel="stylesheet"> runs with the power of your page. Use trusted sources, and consider Subresource Integrity with integrity and crossorigin (see Third-Party Content Security).
• Inline scripts and styles can be blocked by a strict Content-Security-Policy. Prefer external files if you use one.
• Escape anything dynamic. If a server puts visitor-provided text in the <title> or a <meta>, encode it, so no one can close the tag and inject their own.
• Be careful with <base>. An injected base tag can redirect every relative link and form on the page.

Global Audience Notes

• Always use <meta charset="utf-8">, and save your file in UTF-8, so every language displays correctly.
• Write the title and description in the language of the page.
• Keep the head small: visitors on slow or expensive connections feel every extra file.
• Add hreflang links if the page exists in several languages (see the Link lesson).
• Avoid scripts that load fonts or tools from servers that are slow or blocked in some regions, or provide a fallback.

Common Mistakes to Avoid

1. A <div> or loose text in the head, which ends it early.
2. An unclosed <title>.
3. Two <title> elements.
4. Two or more <base> elements.
5. <meta charset> too late in the file.
6. Plain <script> tags in the head, blocking the page.
7. Putting <link> and <meta> tags in the body by accident.
8. The same title and description on every page.
9. Secrets or private notes in comments.
10. Using async for scripts that depend on each other.
11. A noscript snippet with an image in the head.
12. Not checking the result with the browser's inspector.

Practice Time

Try these in your editor:

1. Write a head with charset, viewport, and title.
2. Paste each sample from the Parser Lab into your own file, and inspect it with developer tools.
3. Put a <p> in the head, and see where your next <meta> ends up.
4. Remove the </title> closing tag, and watch what happens to the page.
5. Add two titles, and check which one the tab shows.
6. Add a stylesheet and a script, with and without defer.
7. Use the Network tab in developer tools to compare when each file loads.
8. Move <meta charset> below a very long comment, and read what the validator says.
9. In Docusaurus, add a description to a page's frontmatter, and find it in the built page's head.
10. Bonus: use @docusaurus/Head to add a robots meta tag to one test page.

Quick Recap

Click a question to check your answer.

1. What goes in the head?

Metadata and links to needed files: title, meta, link, style, script, base, and (with limits) noscript and template.

2. What happens if you put a div in the head?

The browser ends the head at that point and starts the body. Any meta or link after it is in the body, and may not work as intended.

3. How many title elements may a page have?

Exactly one, containing only text.

4. What should come first in the head?

<meta charset="utf-8">, within the first 1024 bytes, so the browser knows how to read the rest.

5. What is the difference between defer and async?

Both download without blocking the page. defer runs scripts after the page is read, in order. async runs each script as soon as it arrives, in any order.

6. Are the head tags required?

The browser creates a head even if you leave the tags out, but you should always write them for clarity and predictability.

Key Takeaways

• The head is the page's backstage: metadata and links to the files it needs.
• Only title, meta, link, style, script, base, noscript, and template belong there.
• Invalid content ends the head early, and later tags land in the body.
• Order: charset, viewport, title, other metadata, styles, deferred scripts.
• Use defer or async so scripts do not block the page.
• The head is public, so keep secrets out, escape dynamic values, and load only trusted files.
• In Docusaurus, use the config, frontmatter, and @docusaurus/Head to manage it.

Now name your page well with the Title element.