- -- operator
- -= operator
- ++ operator
- += operator
- Accessing and setting content
- Array concat() method
- Array indexOf()
- Array length
- Array pop()
- Array shift
- Arrays
- Booleans
- Braces
- Callback function
- Calling the function
- Class
- Closure
- Code block
- Comment
- Conditions
- Console
- Constructor
- Creating a p element
- Data types
- Date getTime()
- Destructuring
- Else
- Else if
- Enum
- Equals operator
- Error Handling
- ES6
- Event loop
- Events
- Extend
- Fetch API
- Filter
- For loop
- forEach()
- Function
- Function bind()
- Function name
- Greater than
- Head element
- Hoisting
- If statement
- includes()
- Infinity property
- Iterator
- JSON
- Less than
- Local storage
- Map
- Methods
- Module
- Numbers
- Object.keys()
- Overriding methods
- Parameters
- Promises
- Random
- Reduce
- Regular expressions
- Removing an element
- Replace
- Scope
- Session storage
- Sort
- Splice
- String
- String concat()
- String indexOf()
- Substring
- Switch statement
- Template literals
- Ternary operator
- Title
- Type conversion
- While loop
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.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.