JAVASCRIPT

JavaScript Head Element: Syntax, Usage, and Examples

The <head> element in HTML plays a vital role in controlling how a webpage behaves and displays. While it isn’t directly a JavaScript feature, the head element JavaScript interacts with is crucial for script loading, meta information, and document setup.

How to Use the Head Element in JavaScript

The <head> tag is placed at the beginning of an HTML document, right after the <html> opening tag and before the <body> tag. It contains meta-information that helps the browser and search engines interpret the page.

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <meta charset="UTF-8" />
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

JavaScript can also manipulate the head element dynamically by accessing it through the DOM:

const head = document.head;
const script = document.createElement('script');
script.src = 'extra.js';
head.appendChild(script);

This example shows how JavaScript adds a new script to the document after it's loaded.

When to Use the Head Element in JavaScript

The head element is used for several essential purposes, especially when JavaScript is involved:

1. Including External JavaScript Files

The head element allows you to load external JavaScript files using <script> tags. You can choose between synchronous and deferred loading.

<script src="main.js"></script> <!-- Loads and blocks rendering -->
<script src="main.js" defer></script> <!-- Loads without blocking -->

Using defer is helpful when your scripts don’t need to block rendering and will run after the HTML is fully parsed.

2. Inserting Metadata and SEO Tags

JavaScript might rely on metadata inserted in the head element, such as viewport settings, content type, or Open Graph tags for social sharing.

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

3. Dynamically Updating Page Behavior

If your JavaScript needs to adjust the page behavior, such as adding fonts or additional scripts, it can do so by modifying the head element directly.

For example, adding a new stylesheet:

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'theme-dark.css';
document.head.appendChild(link);

This lets you switch themes or update styles without reloading the page.

Examples of the Head Element in JavaScript

Example 1: Adding a Custom Script with JavaScript

Suppose your application only needs a tracking script after a user accepts cookies. JavaScript can inject that script conditionally:

if (userAcceptedCookies) {
  const script = document.createElement('script');
  script.src = 'analytics.js';
  document.head.appendChild(script);
}

This approach avoids unnecessary script loading and improves performance.

Example 2: Updating the Page Title

The page title is defined in the head element. JavaScript can change it dynamically to reflect user activity:

document.title = "You've got unread messages!";

Useful for chat apps or dashboards that need to notify users when they’re not actively viewing the page.

Example 3: Adding Metadata on the Fly

You can dynamically add meta tags using JavaScript. This could be helpful in single-page applications where content changes without a full reload:

const meta = document.createElement('meta');
meta.name = 'description';
meta.content = 'Updated page description';
document.head.appendChild(meta);

This helps optimize SEO and accessibility for dynamically updated pages.

Learn More About the Head Element in JavaScript

JavaScript head element and document.head

In JavaScript, document.head gives you direct access to the head element. This allows you to modify scripts, styles, or meta tags without touching the body content.

console.log(document.head); // Logs the <head> element

This is especially useful in frameworks or libraries that rely on modifying the document without reloading it.

Script Loading Strategies

The location and attributes of your script tags matter:

  • Placing <script> in the head blocks rendering unless async or defer is used.
  • defer waits for HTML parsing to finish before running.
  • async loads in parallel and runs as soon as it’s ready, this may cause issues if your script relies on the DOM being available.

<script src="script.js" defer></script>

Choosing the right strategy is important when using the head element JavaScript relies on.

Best Practices for Working with the Head Element

  • Only include essential scripts in the head.
  • Use defer for most scripts to improve performance.
  • Modify the head element with JavaScript only when necessary, as too many dynamic changes can confuse browsers or users.
  • Keep SEO and accessibility in mind when updating metadata.

Using the Head Element in Modern Web Apps

Single-page applications (SPAs) frequently change what users see without refreshing the page. In these cases, frameworks like React, Vue, or Angular often include helper libraries (like React Helmet) to manage the head content programmatically.

For example, in React:

import { Helmet } from 'react-helmet';

<Helmet>
  <title>Profile Page</title>
  <meta name="description" content="User profile information and activity" />
</Helmet>

Even though this isn't plain JavaScript, it shows how core JavaScript functionality interacts with the head element under the hood.

Learn to Code in JavaScript for Free
Start learning now
button icon
To advance beyond this tutorial and learn JavaScript by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

© 2025 Mimo GmbH