Skip to main content

HTML Head and Metadata

Open any web page, and you see its body: the headings, pictures, and links. But every page also has a part you never see, called the head. It is the page's control room. It holds the title that appears in the browser tab, the instructions that tell the browser which letters to use, which stylesheets to load, and which summary a search engine or a chat app should show when someone shares your page.

The information stored there is called metadata: data about the page, as opposed to the content of the page. A well-made head makes a page load correctly, look right on a phone, rank sensibly in search results, preview nicely when shared, and work for everyone.


What You Will Learn in This Section​

  • How an HTML document is organised: the <html> and <head> elements
  • Naming a page with <title>
  • Describing a page with <meta>, and getting the character set and viewport right
  • Adding a favicon
  • Connecting stylesheets, scripts, and other files with <link>, <style>, <script>, and <base>
  • Metadata best practices for search, sharing, and accessibility

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>Sourdough for Beginners | The Bread Bin</title>
  <meta name="description" content="A gentle, step-by-step guide to your first sourdough 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>
  <p>Welcome!</p>
</body>
</html>

Click through the elements above. For each one, ask three questions: What does it do? Who reads it? What goes wrong if it is missing? These three questions are the key to the whole section.

A very important point: almost nothing in the head is shown on the page itself. The head works behind the scenes, and its readers are not just people. They are browsers, search engines, social networks, screen readers, and operating systems.

Try It: Read the Head of This Page​

The page you are reading right now has a head. Press the button, and the page will read its own document.head, and show you what is inside.

script.js
// Everything in the head is available to JavaScript
console.log(document.title);                         // the page title
console.log(document.documentElement.lang);          // the lang attribute
console.log(document.characterSet);                  // the character encoding

for (const element of document.head.children) {
  console.log(element.tagName, element.getAttribute("name") || element.getAttribute("rel"));
}

You can do the same on any web page: right-click, choose "View page source" or "Inspect", and look at the <head>. It is one of the best ways to learn: see how well-made sites set theirs up.

The Smallest Valid Head​

Every HTML document needs at least these three things in its head:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>A page title</title>
</head>
<body>
  <p>Hello</p>
</body>
</html>
PartWhy it is needed
<!DOCTYPE html>Switches the browser into standards mode, so it follows the modern rules
<html lang="en">Names the language, for translation, pronunciation, and spelling
<meta charset="utf-8">Tells the browser how to read the letters
<title>Names the page. Required in every document

For a page that will be used on phones (that is, almost every page), also add the viewport line. Together, these make a good starting template:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title | Site name</title>

What Goes Where​

Order matters a little in the head. A good habit:

  1. <meta charset> first, within the first 1024 bytes of the file, so the browser knows how to read everything after it.
  2. <meta name="viewport"> and <title> next.
  3. Other <meta> and <link> tags: description, canonical address, icons, social previews.
  4. Stylesheets, so the page can be styled as early as possible.
  5. Scripts, usually with defer, so they do not block the page from appearing.

You will learn the reasons for each choice in the lessons that follow.

What Is in This Section​

What Can Go in the Head?​

Only a short list of elements is allowed in <head>:

ElementPurpose
<title>The page name (required)
<meta>Information about the page
<link>A relationship with another file, such as a stylesheet or icon
<style>CSS inside the page
<script>JavaScript (or data)
<base>The base address for relative links
<noscript>What to show when scripts are off (limited use in the head)
<template>A fragment that is not shown until script uses it

If you put something else in the head, such as a <div> or a <p>, the browser closes the head early and starts the body. Everything after that point is treated as body content, including any <meta> or <link> tags that follow. That is a common cause of "my tags do nothing" bugs.

Good Habits from the Start​

  1. Always include lang, charset, viewport, and title. The four basics.
  2. Give every page its own title and description. Copy-pasted ones help no one.
  3. Do not block the page. Load scripts with defer, and keep the head light.
  4. Never disable zoom. People with low vision rely on it.
  5. Do not trust any value that comes from a visitor when you build a head on a server. Escape it.
The head is public

Everything in the head, including comments, is visible to anyone who views the page source. Never put passwords, private notes, internal server names, or unreleased plans in it.

Accessibility at a Glance​

  • lang on <html> lets screen readers choose the right pronunciation, and browsers offer correct translation and spell checking.
  • A unique, descriptive <title> is the first thing a screen reader announces on every new page, and the label in the browser's tab list and history.
  • A correct viewport, without user-scalable=no, lets people zoom.
  • charset keeps text readable in every language, including text read aloud.
  • A stylesheet that loads reliably keeps contrast, focus rings, and layout intact.
  • Scripts that load without blocking keep the page usable quickly, including with assistive technology.

Security and Privacy Notes​

  • Anything in the head is public. Do not put secrets there, not even in comments or hidden meta tags.
  • Scripts and styles from other sites run with full power on your page. Load only what you trust, pin versions, and use Subresource Integrity where you can. See Third-Party Content Security.
  • A <base> tag changes every relative link and form address. An attacker who can inject one can redirect your visitors. Keep it out unless you need it, and put it carefully.
  • If a server builds the head from visitor input (for example, a title that includes a search term), escape it, so no one can inject extra tags.
  • A Content-Security-Policy in a <meta> tag helps, but a response header is stronger.
  • Metadata can reveal more than you think: editor names in comments, internal paths in script addresses, and draft notes. Review the source before publishing.

Global Audience Notes​

  • Set lang, and use language codes that match your content (en, hi, ar, pt-BR). For right-to-left languages, also set dir="rtl".
  • Always use UTF-8 (<meta charset="utf-8">), which covers every language. Save your files in UTF-8 as well.
  • Write the title and description in the language of the page, and keep titles short enough that translations do not become too long.
  • Tell search engines about other language versions with <link rel="alternate" hreflang="…">.
  • Think about slow connections: a lean head, deferred scripts, and a small stylesheet help most where the network is weakest.
  • Use the viewport tag, because in many regions, most visitors use phones.

Common Mistakes to Avoid​

  1. No <title>, or one title for the whole site.
  2. No charset, so accents and symbols break.
  3. No viewport, so phones show a tiny desktop page.
  4. Disabling zoom with user-scalable=no or maximum-scale=1.
  5. Putting <div> or text in the head, which ends the head early.
  6. Blocking scripts in the head with no defer.
  7. Forgetting lang on <html>.
  8. Missing doctype, so the browser enters quirks mode.
  9. Duplicate or conflicting tags (two titles, two viewports).
  10. Secrets in comments or metadata.
  11. A <base> tag added without thinking, breaking every relative link.
  12. Copying one head to every page, with the same title and description.

Practice Time​

Try these in your editor:

  1. Write the smallest valid HTML document, with a lang, charset, and title.
  2. Add the viewport meta tag, and open the page on a phone, or in your browser's phone view.
  3. Remove the charset, add some accented letters and an emoji, and see what happens.
  4. Add a description, and a link to an icon.
  5. Open any website, view the source, and list five things in its head.
  6. Use the button above to read this page's head, and find its viewport and lang.
  7. Put a <p> in the head, and look at the page in your browser's inspector to see what the browser did.
  8. Add a stylesheet with <link>, and a script with defer.
  9. Give three different pages three different titles and descriptions.
  10. Bonus: use a free online checker for your page's metadata, and fix the first three problems it finds.

Quick Recap​

Click a question to check your answer.

1. What is the head of an HTML page?

The part that holds information about the page (metadata) and links to the files it needs. It is not shown on the page itself, except for things like the title in the tab and the icon.

2. Which four things should every page's head include?

A lang attribute on <html>, <meta charset="utf-8">, a viewport meta tag, and a unique <title>.

3. Who reads the head?

Browsers, search engines, social networks and messaging apps, screen readers, and operating systems. People mostly see only its effects.

4. Why must <meta charset> come early?

The browser needs to know how to read the letters before it reads the rest of the file. It should appear within the first 1024 bytes.

5. What happens if you put a <div> in the head?

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

6. Is the head private?

No. Anyone can view the page source, so never put secrets, private notes, or internal details in the head.

Key Takeaways​

  • The head holds metadata: information about the page, for browsers, search engines, social apps, and assistive technology.
  • Every page needs a doctype, lang, charset, and title, and nearly every page needs a viewport tag.
  • Put charset first, then the viewport and title, then other meta and link tags, then styles, and then scripts with defer.
  • Only title, meta, link, style, script, base, noscript, and template belong in the head.
  • Give each page its own title and description.
  • Never disable zoom, and never hide secrets in the head.
  • Treat third-party files and server-built values with care.
  • Use UTF-8 and lang, write for your audience's language, and keep the head light for slow connections.

Ready to start? Begin with HTML, the root element that holds everything.