Example 1 — Read document.title
Log the current page title from JavaScript.
JavaScript
console.log("Page title:", document.title);How It Works
The getter returns whatever text is in the document’s <title> element.
JavaScript Document title Property
Overview
What You’ll Learn
Document.title is a get/set instance property that holds the page title shown in the browser tab, bookmarks, and history. Learn how it syncs with the <title> element, how to update titles dynamically, SPA patterns, notification badges, and five examples with try-it labs.
Kind
Read / write
Type
String
Tab text
Browser UI
DOM sync
<title> element
Dynamic
SPAs / alerts
Status
Baseline widely
Fundamentals
Introduction
Every HTML page has a title—the short label users see in the browser tab, bookmark list, and search results. You usually declare it with a <title> tag inside <head>, but JavaScript can read and change it at any time through document.title.
MDN: the title property gets or sets the current title of the document. When you assign a new string, the browser updates the first <title> element (or creates one in <head> if missing). That change is reflected immediately in the tab bar.
One property, many surfaces
The same title string powers the browser tab, default bookmark name, history entry label, and (for crawlers) the primary page heading signal. Keep titles concise, unique, and descriptive.
Related Document tutorials: head, documentElement, readyState, Document constructor.
Concept
Understanding Document.title
A get/set string instance property on every Document object.
- Getter — returns the text of the document title (MDN).
- Setter — updates the first
<title>element, or inserts one in<head>(MDN). - Default — comes from the HTML
<title>in the page source. - Live update — tab text changes as soon as you assign a new string.
- Status — Baseline Widely available (MDN).
Foundation
📝 Syntax
JavaScript
// Read the current title
document.title
// Set a new title
document.title = "My Page — CodeToFun";Value
A string representing the document title (MDN).
HTML equivalent
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page — CodeToFun</title>
</head>
<body>...</body>
</html>Cheat Sheet
⚡ Quick Reference
| Goal | Code / note |
|---|---|
| Read title | document.title |
| Set title | document.title = "New title" |
| Get title element | document.querySelector("title") |
| Append badge | document.title = "(3) " + baseTitle |
| SPA route change | Set title when view changes |
| MDN status | Baseline Widely available |
Snapshot
🔍 At a Glance
Four facts about document.title.
Type
stringGet / set
Shows in
tab barBookmarks
Syncs
<title>MDN
Status
BaselineStandard
Compare
📋 document.title vs querySelector("title")
document.title | querySelector("title") | |
|---|---|---|
| Returns | String (title text) | HTMLTitleElement or null |
| Update title | document.title = "..." | el.textContent = "..." |
| Creates missing title | Yes (MDN) | No — you must create the element |
| Best for | Simple read/write | DOM inspection, attributes, events |
Hands-On
Examples Gallery
Examples follow MDN Document: title. Each includes a try-it lab you can run in the browser.
📚 Getting Started
Read and write the document title.
Example 1 — Read
Example 2 — Set document.title
Change the tab title with a single assignment (MDN).
JavaScript
document.title = "Hello from JavaScript!";
console.log("New title:", document.title);How It Works
Assigning updates the <title> element and the browser tab label instantly.
📈 DOM Sync, Badges & UX Patterns
Practical patterns for real pages and apps.
Example 3 — Compare with the <title> Element
Confirm document.title stays in sync with the DOM.
JavaScript
const titleEl = document.querySelector("title");
console.log({
fromProperty: document.title,
fromElement: titleEl ? titleEl.textContent : null,
inSync: document.title === titleEl?.textContent
});How It Works
Both accessors read the same underlying title text when the page has a single <title> element.
Example 4 — Notification Badge in the Tab
Prefix the title with an unread count—common in chat and inbox apps.
JavaScript
const baseTitle = document.title.replace(/^\(\d+\)\s*/, "");
const unread = 3;
document.title = unread > 0
? `(${unread}) ${baseTitle}`
: baseTitle;
console.log(document.title);How It Works
Store the base title once, strip any existing badge, then prepend (count) when there are unread items.
Example 5 — Flash a Message, Then Restore
Temporarily change the title (e.g. “Saved!”) and revert after a delay.
JavaScript
const original = document.title;
document.title = "Saved!";
console.log("Flashed:", document.title);
setTimeout(() => {
document.title = original;
console.log("Restored:", document.title);
}, 2000);How It Works
Save the current title before overwriting it so you can restore the tab label after a short UX message.
Applications
🚀 Common Use Cases
- Single-page apps — update the tab when routes or views change.
- Unread counters — show
(3)in the tab for new messages. - Save confirmations — flash “Saved!” then restore the original title.
- Loading states — prefix with “Loading…” during async work.
- Debugging — log or display
document.titleto verify page identity. - Accessibility context — ensure title reflects the current page state for screen reader users switching tabs.
🧠 How document.title Works
1
HTML provides a default
The parser reads <title> in <head> when the page loads.
Markup
2
Property mirrors the text
document.title getter returns that string (MDN).
Getter
3
Assignment updates DOM + UI
Setter changes the <title> element and the browser tab (MDN).
Setter
4
Title visible everywhere
Tab, bookmarks, history, and crawlers all use the same title string.
Important
📝 Notes
- MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
- Setting
document.titleupdates or creates the first<title>element (MDN). - Keep titles under ~60 characters when possible for readable tabs and search snippets.
og:titleand other meta tags are separate—update them too if you care about social previews.- Related: head, timeline, Document constructor.
Compatibility
Browser Support
Document.title is marked Baseline Widely available on MDN. Logos use the shared browser-image-sprite.png sprite from this project.
Baseline · Widely available
Document.title
Get/set string — page title for browser tabs, bookmarks, and history.
Widely Available
Google Chrome Full support · Desktop & Mobile
Full supportMozilla Firefox Full support · Desktop & Mobile
Full supportApple Safari Full support · macOS & iOS
Full supportMicrosoft Edge Full support · Chromium
Full supportOpera Full support · Modern versions
Full supportInternet Explorer Supported (legacy)
Legacy supportDocument.title Baseline support
Bottom line: Use document.title to read or update the page title. It syncs with the title element and works in every modern browser.
Wrap Up
Conclusion
Document.title is the simplest way to read and change the page title from JavaScript. It returns a string, updates the <title> element when you assign a new value, and immediately reflects in the browser tab. Use it for SPAs, notification badges, and short UX messages—always keep a copy of the original title when you plan to restore it.
Continue with URL, ownerDocument, head, timeline, or the JavaScript hub.
Pro Tips
💡 Best Practices
✅ Do
- Set a clear default title in HTML
<title> - Update
document.titlewhen SPA routes change - Store the base title before adding notification badges
- Keep titles concise and unique per page
- Restore the original title after temporary flashes
❌ Don’t
- Rely on title alone for SEO—use proper heading structure too
- Leave stale badge counts in the tab after messages are read
- Assume
og:titleupdates automatically - Use extremely long titles that truncate in tabs
- Change the title on every minor DOM update
Summary
Key Takeaways
Knowledge Unlocked
Five things to remember about document.title
The page title string for tabs, bookmarks, and history.
5
Core concepts01
Type
String
Get/set02
Tab
Browser UI
Live03
DOM
<title>
Sync04
Badges
(3) prefix
UX05
Status
Baseline
Standard❓ Frequently Asked Questions
document.title is a get/set string property on Document. Reading it returns the page title text. Assigning a new string updates the document title shown in the browser tab, bookmarks, and history.
No. MDN marks Document.title as Baseline Widely available. It is a standard instance property supported in all modern browsers.
Yes. MDN: assigning to document.title updates the text of the first title element in the document, or creates a title element in head if none exists.
They stay in sync when you use document.title. Reading document.title returns the same text as the title element. Prefer document.title for simple updates; use the DOM when you need to manipulate the element itself.
Yes. SPAs often set document.title when routes change so the tab text matches the current view. Pair with history.pushState for a complete navigation experience.
Search engines use the document title as a primary signal for page topics. Set a clear, descriptive title in HTML or update it early with document.title for dynamic pages.
Did you know?
If a page has no <title> element, assigning document.title creates one inside <head> automatically (MDN). That means you can set a title entirely from JavaScript even when the HTML forgot to include it.
Next: URL
Learn how to read the document location string with document.URL.
About the author
6 people found this page helpful