JAVASCRIPT

JavaScript Title: Syntax, Usage, and Examples

The <title> element in HTML sets the title of the web page shown on the browser tab. While it's defined in HTML, the JavaScript title can also be changed dynamically using code.

How to Use the Title Element in JavaScript

To define a static title, place the <title> tag inside the <head> section of your HTML document:

<head>
  <title>My Webpage</title>
</head>

To change the title dynamically using JavaScript, use the document.title property:

document.title = "New Page Title";

This updates the title in the browser tab immediately without reloading the page.

When to Use the Title in JavaScript

The title tag serves more than just aesthetics. It's crucial for user experience, SEO, and accessibility. Here are some key scenarios where JavaScript interacts with it:

1. Updating the Title Based on Page Content

In single-page applications (SPAs), the page doesn’t reload, but the view changes. You can update the title to reflect the current view:

function switchToProfile() {
  document.title = "User Profile - MyApp";
}

This improves both clarity for users and SEO indexing for different app states.

2. Notifying Users When They're Away

Web apps like email clients or chat platforms often use the title to notify users of new messages:

document.title = "(1) New Message";

You can reset it when the user returns:

window.addEventListener("focus", () => {
  document.title = "Inbox";
});

3. Personalizing Titles Based on User Info

You can use JavaScript to personalize the page:

const username = "Aisha";
document.title = `${username}'s Dashboard`;

This small touch helps users feel more connected to your app.

Examples of Using the JavaScript Title

Example 1: Title Reflecting Scroll Position

You can dynamically change the title depending on how far the user scrolls:

window.addEventListener("scroll", () => {
  if (window.scrollY > 200) {
    document.title = "Keep Exploring!";
  } else {
    document.title = "Welcome!";
  }
});

This playful feedback can increase engagement.

Example 2: Countdown in the Tab Title

This can be used during quizzes, limited-time offers, or games:

let timeLeft = 10;
const timer = setInterval(() => {
  document.title = `Time left: ${timeLeft}s`;
  timeLeft--;
  if (timeLeft < 0) {
    clearInterval(timer);
    document.title = "Time's up!";
  }
}, 1000);

This gives users visual feedback without distracting pop-ups.

Example 3: Detecting User Inactivity

You can monitor user activity and update the title if they go idle:

let timeout;
function resetTimer() {
  clearTimeout(timeout);
  document.title = "Active";
  timeout = setTimeout(() => {
    document.title = "Come back soon!";
  }, 60000); // 1 minute of inactivity
}
window.addEventListener("mousemove", resetTimer);
window.addEventListener("keydown", resetTimer);

This strategy is useful for SaaS platforms or dashboards.

Learn More About the JavaScript Title

JavaScript Title vs. <h1> Tag

The <title> tag defines what shows on the browser tab and is part of the page metadata. The <h1> tag defines visible, on-page headings. Both are important, but they serve very different purposes:

<!-- Not visible -->
<title>Dog Training Tips</title>

<!-- Visible on page -->
<h1>Top 10 Dog Training Tips</h1>

Matching the title and heading improves SEO and accessibility.

JavaScript Title Case

JavaScript doesn’t have a built-in function to convert strings to title case, but you can build one:

function toTitleCase(str) {
  return str
    .toLowerCase()
    .split(" ")
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

const pageTitle = "learn javascript title case";
document.title = toTitleCase(pageTitle); // Output: Learn Javascript Title Case

This is handy for formatting content or automatically setting titles from URLs or input fields.

Title Case JavaScript in Form Inputs

If users submit titles for blog posts or articles, you may want to auto-format them in title case before saving or displaying them:

const input = document.getElementById("title-input");
input.addEventListener("blur", () => {
  input.value = toTitleCase(input.value);
});

A small detail like this can give your app a more polished look.

JavaScript to Title Case for SEO

If your app dynamically builds pages based on user input or content from an API, formatting titles in title case using JavaScript can keep things readable and professional:

const product = "wireless bluetooth earbuds";
document.title = toTitleCase(product) + " | Shop Now";

Good formatting leads to higher click-through rates in search results.

Document Title vs. Meta Title

The <title> tag is the primary title for a page, and search engines typically show it as the clickable link in results. JavaScript can modify the title tag, but it won't affect search engine indexing unless the updated title is rendered on the server or via server-side rendering (SSR).

That means changes made with JavaScript help user experience, but won’t necessarily influence how the page appears in Google unless you're using frameworks like Next.js that render titles server-side.

The JavaScript title plays a behind-the-scenes but essential role in how your page communicates with browsers and users.

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