HTML Head — Webpage Metadata

Beginner
14 min read
Updated: Nov 2026
6 examples
title / meta / link
HTML Head tutorial — webpage metadata: title, charset, viewport, SEO, CSS, and scripts
Definition

Definition and Usage

The HTML head is the part of a document that holds metadata—data about the page—such as the document title, character encoding, description, and links to CSS or JavaScript. Users do not see head content as page text; browsers, search engines, and social apps read it to configure how the page behaves and appears elsewhere.

How is this page different from the <head> tag reference?

This tutorial focuses on what to put in the head and why (webpage metadata). For element syntax, attributes, and technical rules, use the <head> tag reference.

What does webpage metadata do?

Metadata sets the browser tab title, tells phones how to scale the layout, helps search results show a useful snippet, loads stylesheets and scripts, and controls link previews when someone shares your URL.

When do you edit the head?

On every new HTML page: declare charset and viewport, write a unique <title>, add a description when the page should appear in search, then link CSS (and scripts with defer when needed).

Invisible on the page, visible everywhere else.

Tab titles, bookmarks, search snippets, and social cards all come from head metadata—not from the visible <h1>.

<title> ≠ <h1>.

title is document metadata. h1 is a visible heading in <body>. Use both; do not treat them as the same thing.

Language lives on <html>.

Set lang on the opening <html> tag (for example lang="en"). That is part of building a correct document alongside the head.

Syntax

HTML Syntax for a Starter Head

A minimal modern head sits inside <html>, before <body>:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document title</title>
</head>
<body>
  <!-- Visible content -->
</body>
</html>

Expand the head with <meta name="description">, <link rel="stylesheet">, favicons, and <script src="…" defer> as the project grows.

Reference

Core HTML Concepts

Metadata pieces you will use most often in the document head:

PieceWhat it does
<title>Document title for the tab, bookmarks, and often search results
<meta charset>Character encoding (use UTF-8) — see Charset
viewport metaMobile width and zoom so layouts stay readable
description metaShort summary that may appear under the link in search
author metaOptional credit for who wrote the page
<link rel="stylesheet">Loads external CSS — see Add CSS to HTML
<link rel="icon">Favicon for the tab and bookmarks
<script … defer>Loads JS after HTML is parsed — see JavaScript in HTML
og: / Twitter metaRicher previews when the URL is shared on social apps
lang on <html>Primary language of the document (not inside head, but required for a complete page)

<title> vs <h1>

<title><h1>
LocationInside <head>Inside <body>
Visible on page?No (tab / bookmarks / search)Yes
JobName the HTML documentHeadline the page content
Approach

How to Build Webpage Metadata

Add head pieces in this order when you create a new HTML file.

  1. Open with <!DOCTYPE html> and <html lang="…">.
  2. In <head>, put <meta charset="UTF-8"> first (within the first 1024 bytes).
  3. Add the viewport meta tag for responsive pages.
  4. Write one clear <title> (unique per page).
  5. Add meta description (and optional author) for discoverability.
  6. Link CSS with <link rel="stylesheet">; add favicon links if you have icons.
  7. Load scripts with defer in head (or at the end of body while learning).
  8. Add Open Graph / Twitter tags when the page will be shared socially.
GoalHTML in the head
Correct text encoding<meta charset="UTF-8">
Mobile-friendly scaling<meta name="viewport" content="width=device-width, initial-scale=1.0">
Search snippet text<meta name="description" content="…">
Apply site styles<link rel="stylesheet" href="styles.css">
Tab icon<link rel="icon" href="/favicon.ico">
Try it

Live Preview

Pick a metadata piece and see where it shows up (tab, search, styles, or share card)—not as body text.

Simulates where each head tag is consumed—body content stays separate.

Where this metadata appears

🔖 Browser tab: My First Page

<title>My First Page</title>
Code

HTML Examples

Six metadata patterns: minimal head, SEO meta, linked CSS, internal CSS, social tags, and a complete head.

Example 1 — Minimal Head (Charset, Viewport, Title)

Every new HTML page should start with these three metadata pieces:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>Check the browser tab — the title comes from the head.</p>
</body>
</html>
Try It Yourself Open in Tab

How It Works

  1. charset — UTF-8 so Unicode text renders correctly.
  2. viewport — phones use device width instead of a tiny desktop layout.
  3. title — names the document in the tab and bookmarks.
  4. h1 in body — the on-page headline, separate from title.

Example 2 — Description and Author Meta

Name/content meta tags describe the page for tools that are not the visual browser window:

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner-friendly guide to webpage metadata in the HTML head.">
  <meta name="author" content="Alex Developer">
  <title>HTML Head Tutorial</title>
</head>
Try It Yourself Open in Tab

How It Works

  1. name labels the kind of metadata; content holds the value.
  2. description may appear as the snippet under your link in search results.
  3. author credits the writer; some CMS tools can extract it.
  4. keywords meta is largely ignored by major engines—skip it for new pages.

Example 3 — Link a Stylesheet from the Head

Apply CSS to the whole HTML document with <link> in head:

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
Try It Yourself

How It Works

  1. rel="stylesheet" marks the linked file as CSS.
  2. href points at the .css path relative to the HTML file.
  3. Keep link in head so styles can load before body content paints.
  4. Favicons use the same <link> element with rel="icon".

Example 4 — Internal <style> in the Head

Embed CSS in the document when a separate file is not needed yet:

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS</title>
  <style>
    body { font-family: Georgia, serif; max-width: 560px; margin: 2rem auto; }
    h1 { color: #7c3aed; border-bottom: 2px solid #ddd6fe; }
  </style>
</head>
Try It Yourself

How It Works

  1. style holds CSS rules for this HTML document only.
  2. Good for demos and tiny pages while learning.
  3. Move to a file with <link> when styles are shared or grow large.
  4. Same cascade as external CSS once the rules are applied.

Example 5 — Open Graph and Twitter Metadata

Extra meta tags shape how the URL looks when shared on social platforms:

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn webpage metadata in the HTML head.">
  <title>HTML Head — Social Preview</title>
  <meta property="og:title" content="HTML Head Tutorial">
  <meta property="og:description" content="Learn metadata, SEO, and linked resources.">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="HTML Head Tutorial">
</head>
Try It Yourself Open in Tab

How It Works

  1. og:title / og:description feed Facebook, LinkedIn, and similar crawlers.
  2. twitter:card controls X (Twitter) preview layout.
  3. Still add a normal title and description for browsers and search.
  4. Images use og:image with an absolute URL when you want a share graphic.

Example 6 — Complete Head Checklist

Charset, viewport, SEO meta, CSS, and a deferred script in one head:

HTML
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A simple webpage with a well-structured head section.">
  <meta name="author" content="Your Name">
  <title>HTML Head Example</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="/favicon.ico">
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; max-width: 640px; }
    h1 { color: #1e40af; }
    .note { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 12px 16px; }
  </style>
  <script src="script.js" defer></script>
</head>
Try It Yourself

How It Works

  1. Metadata first — encoding, viewport, description, title.
  2. Resources next — stylesheet, favicon, optional internal CSS.
  3. defer — script runs after HTML is parsed, in order.
  4. Body stays clean — only the content users should read and click.

Edge Cases & Pitfalls

Metadata mistakes rarely show as red errors—they show as wrong tabs, broken mobile layout, or missing snippets.

title

Missing or duplicate <title>

Normal HTML documents need exactly one title. Duplicate titles across pages hurt bookmarks and SEO clarity.

charset

Charset declared too late

Put <meta charset> early in head so the browser does not mis-decode the first chunk of the file.

body

Visible content in head

Headings, paragraphs, and images belong in body. Head is for machines and resource links.

header

Confusing head with header

<head> is metadata. <header> is a visible landmark in the body (logo, nav intro).

keywords

Relying on meta keywords

Spend effort on title, description, and content quality—not keyword stuffing meta tags.

script

Blocking scripts in head

A script without defer/async in head can delay first paint. Prefer defer for page scripts.

Compatibility

Browser Support

Document metadata in the HTML head — title, meta, link, style, and script — is supported in all modern browsers.

✓ Baseline · Widely available

Webpage metadata in HTML

Browsers read the head for encoding, title, stylesheets, and scripts on every device users browse today.

100% head metadata support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
HTML head metadata Universal

Bottom line: Focus on correct metadata content—browser support for the head container is not the limiting factor.

Remember

Key Takeaways

  • Head = metadata about the document, not visible page copy.
  • Start with charset, viewport, and a unique <title>.
  • title ≠ h1 — tab/search vs on-page headline.
  • Link CSS/JS from head; use defer for most scripts.

One line: Build the head for machines (title, charset, viewport, description, CSS/JS links); build the body for people.

Frequently Asked Questions

The head is the part of an HTML document that holds metadata about the page — title, character encoding, description, and links to CSS or JavaScript. It is not displayed as page content; browsers and other tools read it to configure the document.
This page is a webpage-metadata tutorial: what to put in the head and why (title vs h1, charset, SEO description, favicons, CSS/JS, social tags). The head tag reference covers the element’s syntax, attributes, and technical rules.
The title element is document metadata — browser tab, bookmarks, and often search results. An h1 is a visible heading in the body for the page’s main topic. They serve different jobs and both belong in a well-structured page.
Put metadata and resource links in head: title, meta, link, style, and many script tags. Put all visible content in body: headings, paragraphs, images, and UI. Never put h1 or p inside head.
Major search engines largely ignore meta keywords because they were abused. Focus on a unique title, a clear meta description, semantic HTML, and useful content.
Set lang on the opening html element (for example html lang="en"), not only inside head. That helps search engines and assistive technologies pronounce and index the document correctly.

Need the element reference?

Open the <head> tag page for attributes and permitted content rules.

head tag reference →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

How to Use JavaScript in HTML HTML Text Formatting