Path // www.yourhtmlsource.com → Reference → <head>

<head>

by Ross Shannon

The <head> element is a container for metadata about the HTML document. It sits between the opening <html> tag and the <body> tag, and contains information that isn't directly displayed on the page but is crucial for the document's behavior, appearance, and discoverability.

Clock This page was last updated on 2025-11-27


Syntax

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
</head>

Attributes

  • Global attributes only - The <head> element accepts standard global attributes like id and class, but these are rarely used in practice.

Examples

Minimal head section:

<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Complete head section with common elements:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of the page">
  <title>Page Title | Site Name</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico">
  <script src="app.js" defer></script>
</head>

Head section with social media meta tags:

<head>
  <meta charset="UTF-8">
  <title>Article Title</title>
  <meta property="og:title" content="Article Title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="image.jpg">
  <meta name="twitter:card" content="summary_large_image">
</head>

When to Use

Every HTML document must have a <head> section. It's the designated container for:

  • <title> - Required; sets the page title shown in browser tabs and search results
  • <meta> - Character encoding, viewport settings, descriptions, keywords
  • <link> - External stylesheets, favicons, canonical URLs, preload hints
  • <style> - Internal CSS styles
  • <script> - JavaScript files or inline scripts
  • <base> - Base URL for relative links
  • <noscript> - Fallback content when JavaScript is disabled

Best practices:

  • Always declare the character encoding first with <meta charset="UTF-8">
  • Include a viewport meta tag for responsive design
  • Place CSS before JavaScript to optimize page rendering
  • Use defer or async attributes on scripts to prevent render-blocking
  • Keep the <head> section organized and minimal for faster page loads

Related Elements

  • <html> - The root element that contains <head>
  • <body> - The sibling element containing visible content
  • <title> - Sets the document title (required)
  • <meta> - Provides document metadata
  • <link> - Links to external resources
  • <style> - Contains internal CSS
  • <script> - Contains or links to JavaScript