<head>

Since:		HTML 4（1997）

The <head> element is a container for metadata about the HTML document. It holds information that is not directly rendered on the page, such as the title shown in the browser tab, the character encoding, and links to CSS files.

Syntax

<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <base href="https://example.com/">
  <link rel="stylesheet" href="style.css?lang=en">
</head>

Tags used inside <head>

Tag	Description
<title>	Specifies the page title. Displayed in the browser tab and search results.
<meta>	Specifies metadata such as character encoding, page description, and viewport settings.
<link>	Links external resources such as CSS stylesheets and favicons.
<style>	Embeds CSS directly within the HTML file.
<script>	Embeds JavaScript or loads an external script file.
<base>	Specifies the base URL used to resolve all relative URLs on the page.

Sample Code

sample_head.html

<!-- Basic head -->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">

  <!-- Viewport settings (for mobile devices) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page description -->
  <meta name="description" content="A description of this page.">

  <!-- Page title -->
  <title>Sample Page | Site Name</title>

  <!-- Link to external CSS -->
  <link rel="stylesheet" href="style.css?lang=en">
</head>
<body>
  <p>The page content goes here.</p>
</body>
</html>

<!-- Practical head with favicon and OGP -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A tutorial site for learning HTML and CSS from the ground up.">

  <title>HTML Basics | Programming Tutorial Site</title>

  <!-- Favicon -->
  <link rel="icon" href="/img/favicon.ico?lang=en" type="image/x-icon">

  <!-- OGP (title, image, and description shown when shared on social media) -->
  <meta property="og:title" content="HTML Basics">
  <meta property="og:description" content="A tutorial site for learning HTML and CSS from the ground up.">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:url" content="https://example.com/html/">
  <meta property="og:type" content="website">

  <!-- External CSS -->
  <link rel="stylesheet" href="style.css?lang=en">

  <!-- JS can go in the head if the defer attribute is used -->
  <script src="main.js" defer></script>
</head>

<!-- Using base to set the base URL for relative links -->
<head>
  <meta charset="UTF-8">
  <title>Page in a subdirectory</title>

  <!-- All relative URLs are resolved against https://example.com/ -->
  <base href="https://example.com/">

  <!-- style.css resolves to https://example.com/style.css -->
  <link rel="stylesheet" href="style.css?lang=en">
</head>

Result

Nothing inside <head> is rendered on the page itself, but the title specified by <title> appears in the browser tab, and the styles from the linked CSS file are applied to the page.

View sample page

Notes

The content inside <head> is not displayed on the page, but it plays a critical role in SEO, page load performance, and mobile compatibility.

The content of the <title> tag also appears in search engine results, so it is important to write a concise title that accurately reflects the page content.

Only one <base> tag is allowed per page. While it is a convenient way to change the base path for all relative URLs at once, incorrect use can cause all links and resource references to break, so use it with care.

For more details on individual tags, see the 『meta』 and 『link』 pages.

Complete head Template for Production Sites

A ready-to-use template with everything a real website needs in its <head>.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 1. Character encoding (always first) -->
  <meta charset="UTF-8">

  <!-- 2. Viewport (required for mobile) -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 3. SEO -->
  <title>Page Title | Site Name</title>
  <meta name="description" content="Describe the page in 120–160 characters.">
  <link rel="canonical" href="https://example.com/page/">

  <!-- 4. OGP (social sharing) -->
  <meta property="og:title" content="Page Title | Site Name">
  <meta property="og:description" content="Description shown when shared on social media.">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">

  <!-- 5. Favicon -->
  <link rel="icon" href="/favicon.svg?lang=en" type="image/svg+xml">
  <link rel="icon" href="/favicon.png?lang=en" type="image/png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png?lang=en">

  <!-- 6. Performance (font preloading) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/fonts/main.woff2?lang=en"
        as="font" type="font/woff2" crossorigin>

  <!-- 7. Stylesheet -->
  <link rel="stylesheet" href="/css/style.css?lang=en">

  <!-- 8. JavaScript (defer recommended) -->
  <script src="/js/main.js" defer></script>
</head>
<body>
  <!-- content -->
</body>
</html>

Following this order ensures the browser can parse and render the page correctly. In particular, charset and viewport must appear near the top.

Dynamically Manipulating head with JavaScript

You can use JavaScript to dynamically change the page title and meta information after the page has loaded. This is a common pattern in single-page applications (SPAs).

// Change the page title dynamically
document.title = "New Title | Site Name";

// Change the description meta tag
var metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) {
  metaDesc.setAttribute("content", "Updated description text.");
}

// Add a new meta tag dynamically
var meta = document.createElement("meta");
meta.setAttribute("name", "robots");
meta.setAttribute("content", "noindex");
document.head.appendChild(meta);

// Load an external CSS dynamically
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/css/theme-dark.css";
document.head.appendChild(link);