0%

<title> Document title

Names the page in the browser tab, in bookmarks and in search results.

By HTML6 (opens in a new tab) · Updated · How we write and check content

Every page needs exactly one <title>, placed inside the <head>. It holds plain text; tags are not allowed.

You see the title on the browser tab, in bookmarks and history, and as the clickable headline in search results. Screen readers read it out when the page opens. Give each page its own descriptive title, with the specific page name first and the site name after it, like Contact - Sunny Bakery. A bare Untitled or Home tells nobody anything.

The title element definition (opens in a new tab) requires one title in every normal document. Write your own and watch where it shows up in the Title and Charset lesson.

Syntax

<head>
  <title>Page name - Site name</title>
</head>

When to use it

Each page needs its own title, and it should describe that page alone: a product name, an article headline, or a checkout step like "Payment (step 2 of 3)". People with a dozen tabs open see only the first few words, so lead with the part that tells your pages apart.

The title and the visible <h1> are separate things. They often overlap, but the title can be shorter and carry the site name, while the h1 can be longer and friendlier. For sharing previews, social networks use an Open Graph og:title meta tag if you provide one and fall back to the title otherwise.

Search results and forms that failed validation often keep a generic title. Write "2 errors | Sign up" or "Results for pancakes | Sunny Bakery" instead. The title is announced when the page loads, so screen reader users and tab-switchers learn what happened. Practise writing good ones in the title and charset lesson.

Live example

Edit the code and watch the preview.

<!doctype html>
<html lang="en">
<head>
  <title>Opening Hours - Sunny Bakery</title>
</head>
<body>
  <p>Look at the tab to see the title.</p>
</body>
</html>

More examples

Special characters in a title

The title may contain character references, so &amp; shows up as an ampersand in the tab. Tags are not allowed: anything that looks like a tag is displayed as plain text. Look at the tab or bookmark name to see the result.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fish &amp; Chips Menu - The Harbour Cafe</title>
</head>
<body>
  <h1>Fish and chips</h1>
  <p>The tab shows an ampersand, written as &amp;amp; in the source.</p>
</body>
</html>

Title and h1 working together

On this article page the title is short and ends with the site name, which suits tabs and search results. The visible <h1> is a friendlier headline. The two use different words for the same page, and people and search engines get the same answer from both.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Storing Bread - Sunny Bakery Blog</title>
</head>
<body>
  <article>
    <h1>How to keep your bread fresh for a whole week</h1>
    <p>Forget the fridge: a paper bag and a freezer do the job better.</p>
  </article>
</body>
</html>

Tip: Put the page name first and the site name second.

Browser support

Browsers have shown the title since the early days of HTML. Where they show it varies: desktop browsers show it in the tab, mobile browsers may show it only in the tab switcher, and search engines may shorten or rewrite it. A missing title is a validation error in normal documents.

Accessibility

WCAG 2.4.2 asks for a unique, descriptive title on every page. A screen reader announces it as soon as the page loads. The W3C note Understanding Page Titled (opens in a new tab) walks through worked examples.

Common mistakes

Wrong

<title>Home</title>

Right

<title>Handmade Leather Wallets - Oak and Hide</title>

A vague title tells neither visitors nor search engines what the page covers.

Wrong

<title>My <b>Shop</b></title>

Right

<title>My Shop</title>

Only plain text goes in title. Tags inside it are displayed literally.

Frequently asked questions

How long should an HTML title tag be?

HTML sets no limit. Search engines tend to show around 50 to 60 characters and cut off the rest, so lead with the words that count, keep every title unique and put the site name last, as in <title>Contact Us - Acme Bakery</title>. A good title also helps people find the right tab when they have twenty open. Google describes how it turns your title into the clickable headline in its guide to title links (opens in a new tab).

What is the difference between the title tag and the title attribute?

They share a name and nothing else. The <title> element sits in the head and names the whole document for the browser tab, bookmarks and search results. The title attribute can go on any element and adds advisory text, which browsers usually show as a tooltip when the mouse hovers over it.

Practise it

Related metadata elements

<meta>Page metadata such as the charset, viewport and description.<link>Ties the page to external files such as stylesheets and icons.<style>Puts CSS rules straight into the page.<base>Sets the base URL and default target for all relative links on a page.