Skip to content
html.sh

<title> - Document Title Element

The <title> Element

Section titled “The <title> Element”
Metadata HTML 1.0

The <title> element defines the document’s title that is displayed in the browser’s title bar or tab, shown in search engine results, and used when bookmarking the page. It’s one of the most important elements for both user experience and search engine optimization.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<title>Your Page Title Here</title>

The <title> element must be placed inside the <head> element and should contain only text. HTML tags inside <title> are not rendered and will appear as plain text.

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <title> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes, though they are rarely used on <title> and have no practical effect in most browsers.

Common Use Cases

Section titled “Common Use Cases”

Basic Page Title

Section titled “Basic Page Title”

A simple, descriptive title for a webpage:

Result

SEO-Optimized Title

Section titled “SEO-Optimized Title”

Include relevant keywords and make titles descriptive for search engines:

Result

Title with Site Name

Section titled “Title with Site Name”

Include your brand name at the end of the title using a separator:

Result

Common separators include pipe (|), dash (-), colon (:), or double colon (::).

Dynamic Titles for Web Apps

Section titled “Dynamic Titles for Web Apps”

Titles can be updated dynamically with JavaScript to reflect application state:

Result

This is useful for showing notification counts, loading states, or current page status in single-page applications.

Best Practices

Section titled “Best Practices”

Optimal Length

Section titled “Optimal Length”

Keep titles between 50 and 60 characters for optimal display in search results. Google typically displays the first 50-60 characters of a title tag.

<!-- 52 characters - displays fully -->
<title>How to Bake Sourdough Bread | Baking Guide</title>

Unique Titles for Each Page

Section titled “Unique Titles for Each Page”

Every page on your site should have a unique, descriptive title that reflects its content:

<!-- Homepage -->
<title>Premium Coffee Beans | CoffeeShop</title>


<!-- Product category -->
<title>Dark Roast Coffee Beans | CoffeeShop</title>


<!-- Specific product -->
<title>Ethiopian Yirgacheffe Dark Roast | CoffeeShop</title>


<!-- About page -->
<title>About Our Coffee Roasting Process | CoffeeShop</title>

Front-Load Important Keywords

Section titled “Front-Load Important Keywords”

Put your most important keywords at the beginning where they have more SEO weight and are less likely to be truncated:

<title>React Tutorial for Beginners | WebDev Academy</title>

Avoid Keyword Stuffing

Section titled “Avoid Keyword Stuffing”

Don’t repeat keywords unnecessarily or stuff unrelated keywords into your title:

<title>Affordable Web Hosting Plans for Small Business</title>

Match Title to Heading

Section titled “Match Title to Heading”

The page title should closely align with the main heading (h1) on the page, though they don’t need to be identical:

<head>
  <title>Complete Guide to CSS Grid Layout | CSS Tricks</title>
</head>
<body>
  <h1>Complete Guide to CSS Grid</h1>
</body>

Accessibility

Section titled “Accessibility”

Screen Reader Announcement

Section titled “Screen Reader Announcement”

Screen readers announce the page title when a user first visits the page or switches tabs. This helps users understand what page they’re on:

<title>Shopping Cart - 3 items | MyStore</title>

This immediately tells a screen reader user they’re viewing a shopping cart with three items, even before hearing the page content.

Descriptive and Contextual

Section titled “Descriptive and Contextual”

Make titles descriptive enough to be understood out of context. Users with screen readers often navigate by jumping between tabs or reviewing their history:

<title>Account Settings - Privacy Options | SocialApp</title>

Dynamic Title Updates

Section titled “Dynamic Title Updates”

When dynamically updating titles in single-page applications, screen readers will announce the new title. Use this to provide context about navigation or state changes:

// When navigating to a new view
document.title = "Profile Settings | MyApp";


// When showing notification count
document.title = `(5) New Messages | MyApp`;

SEO Impact

Section titled “SEO Impact”

Critical Ranking Factor

Section titled “Critical Ranking Factor”

The <title> element is one of the most important on-page SEO factors. Search engines use it to understand page content and determine relevance to search queries.

Search Result Display

Section titled “Search Result Display”

Your title appears as the clickable headline in search engine results pages (SERPs):

<title>10 Tips for Better Sleep | Health & Wellness Blog</title>

This becomes the blue clickable link users see in Google search results, making it crucial for click-through rates.

Title Rewriting

Section titled “Title Rewriting”

Search engines may rewrite your title if they determine it’s not relevant or optimally formatted. To minimize this:

  1. Make titles accurate and descriptive
  2. Avoid excessive keyword repetition
  3. Keep titles concise and relevant to page content
  4. Don’t use all caps or excessive punctuation

Social Sharing

Section titled “Social Sharing”

While Open Graph and Twitter Card meta tags can override the title for social media, the <title> element serves as the fallback:

<head>
  <title>Amazing Article About Web Development</title>
  <!-- Open Graph overrides for social media -->
  <meta property="og:title" content="Amazing Article About Web Dev">
</head>

Browser Support

Section titled “Browser Support”
BrowserVersion
ChromeAll versions
FirefoxAll versions
SafariAll versions
EdgeAll versions
IEAll versions

The <title> element has been supported since the earliest web browsers and is part of the core HTML specification.

Section titled “Related Elements”

Container for document metadata including the title element. Learn more →

Provides additional metadata including description and keywords for SEO. Learn more →

The main heading that typically complements the page title. Learn more →

Common Mistakes

Section titled “Common Mistakes”

Missing Title Element

Section titled “Missing Title Element”
<!-- Wrong: No title -->
<head>
  <meta charset="UTF-8">
</head>


<!-- Correct: Include title -->
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>

Multiple Title Elements

Section titled “Multiple Title Elements”
<!-- Wrong: Multiple titles -->
<head>
  <title>First Title</title>
  <title>Second Title</title>
</head>


<!-- Correct: Only one title -->
<head>
  <title>Single Title</title>
</head>

HTML Tags in Title

Section titled “HTML Tags in Title”
<!-- Wrong: HTML is rendered as text -->
<title>Welcome to <strong>Our Site</strong></title>


<!-- Correct: Plain text only -->
<title>Welcome to Our Site</title>

Empty or Generic Titles

Section titled “Empty or Generic Titles”
<!-- Wrong: Too generic -->
<title>Home</title>
<title>Page</title>
<title>Untitled Document</title>


<!-- Correct: Descriptive and specific -->
<title>Professional Photography Services in Portland | Studio Name</title>

Title Outside Head

Section titled “Title Outside Head”
<!-- Wrong: Title must be in head -->
<body>
  <title>My Page</title>
</body>


<!-- Correct: Title in head section -->
<head>
  <title>My Page</title>
</head>

Specifications

Section titled “Specifications”