<head> - Document Metadata Container

The `<head>` Element

Metadata Container HTML 2.0

The <head> element contains machine-readable information (metadata) about the document, including its title, scripts, style sheets, and other meta information. Content inside <head> is not displayed on the page but tells browsers and search engines important details about your document.

Quick Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpage Title</title>
  <meta name="description" content="A brief description of the page">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Visible Content</h1>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Webpage Title</title>
  <meta name="description" content="A brief description of the page">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Visible Content</h1>
</body>
</html>

Syntax

<head>
  <!-- Metadata elements go here -->
</head>

Attributes

Element-Specific Attributes

The <head> element has no element-specific attributes.

Global Attributes

This element supports all global attributes, though they’re rarely used on <head>.

Common Use Cases

Essential Metadata

Every HTML document should have these core elements in the <head>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essential Metadata Example</title>
</head>
<body>
  <h1>Page with Essential Metadata</h1>
  <p>This page has proper character encoding and viewport settings.</p>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essential Metadata Example</title>
</head>
<body>
  <h1>Page with Essential Metadata</h1>
  <p>This page has proper character encoding and viewport settings.</p>
</body>
</html>

SEO-Optimized Head

For better search engine optimization, include descriptive metadata:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Development Tips | MyBlog</title>
  <meta name="description" content="Learn modern web development techniques with practical tutorials and code examples for HTML, CSS, and JavaScript.">
  <meta name="keywords" content="web development, HTML, CSS, JavaScript, tutorials">
  <meta name="author" content="Jane Developer">
</head>
<body>
  <article>
    <h1>Introduction to HTML</h1>
    <p>Learn the basics of HTML...</p>
  </article>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Development Tips | MyBlog</title>
  <meta name="description" content="Learn modern web development techniques with practical tutorials and code examples for HTML, CSS, and JavaScript.">
  <meta name="keywords" content="web development, HTML, CSS, JavaScript, tutorials">
  <meta name="author" content="Jane Developer">
</head>
<body>
  <article>
    <h1>Introduction to HTML</h1>
    <p>Learn the basics of HTML...</p>
  </article>
</body>
</html>

Add Open Graph and Twitter Card metadata for better social sharing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Amazing Article</title>

  <!-- Open Graph metadata for Facebook, LinkedIn -->
  <meta property="og:title" content="Amazing Article">
  <meta property="og:description" content="This article will change your life">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/article">

  <!-- Twitter Card metadata -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Amazing Article">
  <meta name="twitter:description" content="This article will change your life">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
  <h1>Amazing Article</h1>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Amazing Article</title>

  <!-- Open Graph metadata for Facebook, LinkedIn -->
  <meta property="og:title" content="Amazing Article">
  <meta property="og:description" content="This article will change your life">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/article">

  <!-- Twitter Card metadata -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Amazing Article">
  <meta name="twitter:description" content="This article will change your life">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
  <h1>Amazing Article</h1>
</body>
</html>

Linking External Resources

Include stylesheets, fonts, and icons:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Beautifully Styled Page</h1>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <h1>Beautifully Styled Page</h1>
</body>
</html>

Scripts and Performance

Include JavaScript files with proper loading strategies:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Page</title>

  <!-- Critical CSS inline -->
  <style>
    body { margin: 0; font-family: system-ui; }
  </style>

  <!-- Preload critical resources -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Async scripts for analytics -->
  <script async src="/analytics.js"></script>

  <!-- Defer non-critical scripts -->
  <script defer src="/app.js"></script>
</head>
<body>
  <h1>Fast-Loading Interactive Page</h1>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive Page</title>

  <!-- Critical CSS inline -->
  <style>
    body { margin: 0; font-family: system-ui; }
  </style>

  <!-- Preload critical resources -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Async scripts for analytics -->
  <script async src="/analytics.js"></script>

  <!-- Defer non-critical scripts -->
  <script defer src="/app.js"></script>
</head>
<body>
  <h1>Fast-Loading Interactive Page</h1>
</body>
</html>

Valid Child Elements

The <head> element can contain these elements:

<title> - Required, defines document title (exactly one)
<meta> - Defines metadata
<link> - Links to external resources
<style> - Contains CSS styles
<script> - Contains or references JavaScript
<base> - Specifies base URL for relative URLs
<noscript> - Alternative content when scripts are disabled

Best Practices

Order of Elements

While not strictly enforced, follow this recommended order for better performance:

Character encoding (<meta charset>)
Viewport settings (<meta name="viewport">)
Title (<title>)
Preconnect and DNS prefetch hints
Critical CSS (inline <style>)
Preload tags for critical resources
Other metadata (<meta> tags)
Stylesheets (<link rel="stylesheet">)
Scripts (<script>)

<head>
  <!-- 1. Character encoding first -->
  <meta charset="UTF-8">

  <!-- 2. Viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. Title -->
  <title>Page Title</title>

  <!-- 4. Resource hints -->
  <link rel="preconnect" href="https://fonts.googleapis.com">

  <!-- 5. Critical CSS -->
  <style>/* critical styles */</style>

  <!-- 6. Preload critical resources -->
  <link rel="preload" href="hero.jpg" as="image">

  <!-- 7. Other metadata -->
  <meta name="description" content="...">

  <!-- 8. Stylesheets -->
  <link rel="stylesheet" href="styles.css">

  <!-- 9. Scripts -->
  <script defer src="app.js"></script>
</head>

Minimize Head Size

Keep the <head> section lean. Every byte in the <head> delays page rendering:

Inline only critical CSS
Use async/defer for non-critical scripts
Avoid excessive metadata
Minimize the number of external resources

Mobile-Friendly Viewport

Always include a viewport meta tag for responsive design:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Accessibility

Title Importance

The <title> element is announced by screen readers and appears in browser tabs. Make it descriptive and unique:

<!-- Good: Specific and descriptive -->
<title>Shopping Cart - 3 items | MyStore</title>

<!-- Avoid: Too generic -->
<title>Page</title>

Language and Character Encoding

Proper character encoding and language declaration help assistive technologies:

<head>
  <meta charset="UTF-8">
  <!-- Language set on <html> element -->
</head>

Browser Support

Browser	Version
Chrome	All versions
Firefox	All versions
Safari	All versions
Edge	All versions
IE	All versions

The root element containing head and body. Learn more →

Contains the visible content of the document. Learn more →

</span> </p> <div class="body astro-v5tidmuc"><p>Defines the document title shown in browser tabs. <a href="/elements/metadata/title/">Learn more →</a></p></div> </article> <article class="card sl-flex astro-v5tidmuc"> <p class="title sl-flex astro-v5tidmuc"> <svg aria-hidden="true" class="icon astro-v5tidmuc astro-c6vsoqas" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.333em;"><path d="M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3.06a1.3 1.3 0 0 0-.06-.27v-.09c-.05-.1-.11-.2-.19-.28l-6-6a1.07 1.07 0 0 0-.28-.19h-.09a.88.88 0 0 0-.33-.11H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8.94Zm-6-3.53L16.59 8H15a1 1 0 0 1-1-1V5.41ZM18 19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z"/></svg> <span class="astro-v5tidmuc"><meta></span> </p> <div class="body astro-v5tidmuc"><p>Defines metadata about the HTML document. <a href="/elements/metadata/meta/">Learn more →</a></p></div> </article> </div> <div class="sl-heading-wrapper level-h2"><h2 id="common-mistakes">Common Mistakes</h2><a class="sl-anchor-link" href="#common-mistakes"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Common Mistakes”</span></a></div> <div class="sl-heading-wrapper level-h3"><h3 id="missing-required-elements">Missing Required Elements</h3><a class="sl-anchor-link" href="#missing-required-elements"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Missing Required Elements”</span></a></div> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5F636F"></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA"><</span><span style="--0:#CAECE6">head</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--1:#8844AE"><span style="--0:#7FDBCA"><</span><span style="--0:#CAECE6">meta</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">charset</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">UTF-8</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA"></</span><span style="--0:#CAECE6">head</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5F636F"></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA"><</span><span style="--0:#CAECE6">head</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--1:#8844AE"><span style="--0:#7FDBCA"><</span><span style="--0:#CAECE6">meta</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">charset</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">UTF-8</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#7FDBCA;--1:#8844AE">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--1:#8844AE"><span style="--0:#7FDBCA"><</span><span style="--0:#CAECE6">title</span><span style="--0:#7FDBCA">></span></span><span style="--0:#D6DEEB;--1:#403F53">My Page</span><span style="--1:#8844AE"><span style="--0:#7FDBCA"></</span><span style="--0:#CAECE6">title</span><span style="--0:#7FDBCA">></span></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA"></</span><span style="--0:#CAECE6">head</span><span style="--0:#7FDBCA">></span></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<head> <meta charset="UTF-8"></head><head> <meta charset="UTF-8"> <title>My Page">

Placing Visible Content in Head

<!-- Wrong: Visible content belongs in body -->
<head>
  <title>My Page</title>
  <h1>Welcome</h1>
</head>

<!-- Correct: Only metadata in head -->
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
</body>

<head> - Document Metadata Container

The <head> Element

Quick Example

Syntax

Attributes

Element-Specific Attributes

Global Attributes

Common Use Cases

Essential Metadata

SEO-Optimized Head

Social Media Metadata

Linking External Resources

Scripts and Performance

Valid Child Elements

Best Practices

Order of Elements

Minimize Head Size

Mobile-Friendly Viewport

Accessibility

Title Importance

Language and Character Encoding

Browser Support

Related Elements

Placing Visible Content in Head

Specifications

The `<head>` Element