Runnable HTML Docs: Title Tag

Q: How do I change the page title with JavaScript?

Assign to document.title, for example document.title = '(3) Inbox'. The browser updates the tab right away, which is how web apps show unread counts.

Q: Is the title tag the same as the title attribute?

No. The element names the whole page. The title attribute, which works on almost any element, adds a tooltip that appears when you hover that element.

Where the title tag goes

Every page needs one <title> element inside <head>. Its text is the page name that browsers show in the tab and bookmarks, and that search engines usually show as the result headline:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

The title itself never appears inside the page. This preview also runs inside the Coddy docs page, so your browser tab keeps showing the docs title; the small script prints what a tab would show if you opened the example as its own file. Edit the text in <title> and the line updates.

Writing a good title

The title is often the first thing a person reads about your page, in a search result or a row of tabs. A few rules cover most pages:

Be specific and unique. Every page on a site should have its own title that describes that page: "Chocolate Chip Cookies Recipe", not "Home" or "Page 1".
Put the important words first. Tabs are narrow and search results cut long titles. Keep the key phrase within the first 50 to 60 characters or so.
Add the site name at the end, separated by | or :, so the page topic still comes first.
Write it for people. A title stuffed with repeated keywords looks like spam, and search engines may rewrite it.

This mock tab clips the title at about the width of a real tab. Try a shorter or longer title:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

With the site name last, a clipped tab still shows what the page is about. Swap the order ("Bake Club | How to...") and every tab from your site would start with the same two words.

Title tag vs h1 vs the title attribute

	Where	Shown	Job
`<title>`	In `<head>`, once	Tab, bookmarks, search results	Names the page
`<h1>`	In `<body>`	On the page	Main visible heading
`title="..."` attribute	On any element	Tooltip on hover	Extra hint about that element

The title and the <h1> usually match in meaning, but the title can be phrased for search and carry the site name, while the heading can be shorter. The title attribute is unrelated, despite the name. Hover the underlined word:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Tooltips from the title attribute do not appear on touch screens and are not reliably read by screen readers, so do not put important information only there.

Only text goes in a title

The browser reads everything between <title> and </title> as plain text. Tags are not parsed, but character references such as & are decoded, and runs of whitespace collapse to one space:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

The result is Salt & Pepper <b>Bold?</b>: the entity became &, the three spaces became one, and the <b> tags stayed as literal characters. Emphasis is not possible in a title.

Changing the title with JavaScript

document.title is readable and writable. Web apps use it to show unread counts or the current state in the tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

On a real page the browser tab changes at the same moment as the mock tab here. Search engines that run JavaScript can see a title set by script, but a title written in the HTML is the reliable choice for anything that should be indexed.

Common mistakes

No title at all. The browser falls back to the URL or file name, and the page is invalid HTML. Add one to every page, next to the meta viewport tag in your template.
The same title on every page. Tabs, bookmarks and search results become impossible to tell apart.
Putting <title> in <body>. Browsers still use it, but it belongs in <head>, and some tools will miss it.
Two <title> elements. Only the first one counts. Remove the others.
Starting every title with the site name. Lead with the page topic; the site name goes last.

Frequently Asked Questions

What is the title tag in HTML?

<title> sets the name of the page. Browsers show it in the tab and in bookmarks, and search engines usually show it as the clickable headline of the result. It goes inside <head> and contains only text.

How long should a title tag be?

Search engines cut off long titles by display width, so keep the important words in the first 50 to 60 characters or so. There is no hard limit in HTML, but anything past that point may be hidden behind an ellipsis.

What is the difference between the title tag and h1?

<title> is metadata: it names the page in tabs and search results and is not shown in the page itself. <h1> is the visible main heading in the body. They often say similar things, but the title can add the site name and be phrased for search.

Can I put HTML tags inside the title tag?

No. The title element holds text only. Tags inside it are shown literally, so <title>A <b>B</b></title> gives a tab that reads "A <b>B</b>". Character references such as & do work.

How do I change the page title with JavaScript?

Assign to document.title, for example document.title = '(3) Inbox'. The browser updates the tab right away, which is how web apps show unread counts.

Is the title tag the same as the title attribute?

No. The <title> element names the whole page. The title attribute, which works on almost any element, adds a tooltip that appears when you hover that element.

Related concepts