The translate Attribute

The `translate` Attribute

Global Attribute

The translate attribute specifies whether an element’s text content and attribute values should be translated when the page is localized or when using browser translation tools. It’s essential for protecting brand names, technical terms, code examples, and other content that shouldn’t be translated.

Syntax

<element translate="value">Content</element>

Values

Value	Description
`yes` (default)	Content should be translated
`no`	Content should NOT be translated

Examples

Brand Names and Product Names

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container { padding: 20px; max-width: 800px; margin: 0 auto; }
  .product-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    background: white;
  }
  .brand-name {
    font-size: 24px;
    font-weight: bold;
    color: #3b82f6;
    margin-bottom: 10px;
  }
  .product-name {
    font-size: 20px;
    font-weight: bold;
    color: #1e293b;
    margin: 10px 0;
  }
  .description {
    color: #64748b;
    line-height: 1.6;
  }
  .price {
    font-size: 24px;
    font-weight: bold;
    color: #10b981;
    margin-top: 15px;
  }
  .info-box {
    background: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .badge {
    display: inline-block;
    padding: 4px 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    margin-left: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="info-box">
    <strong>Translation Test:</strong> Use Chrome's translate feature (right-click → Translate) to see how translate="no" protects specific content!
  </div>

  <h1>Our Products</h1>

  <div class="product-card">
    <div class="brand-name" translate="no">
      TechPro™
      <span class="badge">translate="no"</span>
    </div>
    <div class="product-name" translate="no">
      TechPro X1 Elite
      <span class="badge">translate="no"</span>
    </div>
    <p class="description">
      The ultimate wireless headphones with advanced noise cancellation technology. Experience premium sound quality with our exclusive TechSound™ technology.
    </p>
    <div class="price" translate="no">$299.99</div>
  </div>

  <div class="product-card">
    <div class="brand-name" translate="no">
      CodeMaster®
    </div>
    <div class="product-name" translate="no">
      CodeMaster Pro IDE
    </div>
    <p class="description">
      Professional integrated development environment designed for modern developers. Build amazing applications with CodeMaster's powerful features.
    </p>
    <div class="price" translate="no">$49.99/month</div>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container { padding: 20px; max-width: 800px; margin: 0 auto; }
  .product-card {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    background: white;
  }
  .brand-name {
    font-size: 24px;
    font-weight: bold;
    color: #3b82f6;
    margin-bottom: 10px;
  }
  .product-name {
    font-size: 20px;
    font-weight: bold;
    color: #1e293b;
    margin: 10px 0;
  }
  .description {
    color: #64748b;
    line-height: 1.6;
  }
  .price {
    font-size: 24px;
    font-weight: bold;
    color: #10b981;
    margin-top: 15px;
  }
  .info-box {
    background: #dbeafe;
    border: 2px solid #3b82f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .badge {
    display: inline-block;
    padding: 4px 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
    margin-left: 10px;
  }
</style>
</head>
<body>
<div class="container">
  <div class="info-box">
    <strong>Translation Test:</strong> Use Chrome's translate feature (right-click → Translate) to see how translate="no" protects specific content!
  </div>

  <h1>Our Products</h1>

  <div class="product-card">
    <div class="brand-name" translate="no">
      TechPro™
      <span class="badge">translate="no"</span>
    </div>
    <div class="product-name" translate="no">
      TechPro X1 Elite
      <span class="badge">translate="no"</span>
    </div>
    <p class="description">
      The ultimate wireless headphones with advanced noise cancellation technology. Experience premium sound quality with our exclusive TechSound™ technology.
    </p>
    <div class="price" translate="no">$299.99</div>
  </div>

  <div class="product-card">
    <div class="brand-name" translate="no">
      CodeMaster®
    </div>
    <div class="product-name" translate="no">
      CodeMaster Pro IDE
    </div>
    <p class="description">
      Professional integrated development environment designed for modern developers. Build amazing applications with CodeMaster's powerful features.
    </p>
    <div class="price" translate="no">$49.99/month</div>
  </div>
</div>
</body>
</html>

Code Examples and Technical Documentation

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .documentation {
    max-width: 800px;
    margin: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
  }
  h2 { color: #1e293b; }
  .code-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 15px 0;
    overflow-x: auto;
  }
  .code-inline {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: #e11d48;
    font-size: 14px;
  }
  .api-reference {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
  }
  .function-name {
    font-family: monospace;
    color: #8b5cf6;
    font-weight: bold;
  }
  .variable-name {
    font-family: monospace;
    color: #0ea5e9;
  }
</style>
</head>
<body>
<div class="documentation">
  <h2>JavaScript Array Methods</h2>

  <p>
    The <code class="code-inline" translate="no">map()</code> method creates a new array by calling a function on every element in the original array.
  </p>

  <h3>Syntax</h3>
  <pre class="code-block" translate="no">array.map(callback(element, index, array) {
// return element for new array
})</pre>

  <h3>Example</h3>
  <pre class="code-block" translate="no">const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</pre>

  <p>
    In this example, we use <code class="code-inline" translate="no">map()</code> to create a new array where each element is doubled. The <span class="variable-name" translate="no">numbers</span> array remains unchanged.
  </p>

  <div class="api-reference">
    <h4>API Reference</h4>
    <p>
      <strong>Function:</strong> <span class="function-name" translate="no">getUserData(userId)</span>
    </p>
    <p>
      <strong>Parameters:</strong>
      <ul>
        <li><code translate="no">userId</code> (string) - The unique user identifier</li>
      </ul>
    </p>
    <p>
      <strong>Returns:</strong> <code translate="no">Promise&lt;UserData&gt;</code>
    </p>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .documentation {
    max-width: 800px;
    margin: 20px;
    padding: 20px;
    background: white;
    border-radius: 8px;
  }
  h2 { color: #1e293b; }
  .code-block {
    background: #1e293b;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 15px 0;
    overflow-x: auto;
  }
  .code-inline {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: #e11d48;
    font-size: 14px;
  }
  .api-reference {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
  }
  .function-name {
    font-family: monospace;
    color: #8b5cf6;
    font-weight: bold;
  }
  .variable-name {
    font-family: monospace;
    color: #0ea5e9;
  }
</style>
</head>
<body>
<div class="documentation">
  <h2>JavaScript Array Methods</h2>

  <p>
    The <code class="code-inline" translate="no">map()</code> method creates a new array by calling a function on every element in the original array.
  </p>

  <h3>Syntax</h3>
  <pre class="code-block" translate="no">array.map(callback(element, index, array) {
// return element for new array
})</pre>

  <h3>Example</h3>
  <pre class="code-block" translate="no">const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</pre>

  <p>
    In this example, we use <code class="code-inline" translate="no">map()</code> to create a new array where each element is doubled. The <span class="variable-name" translate="no">numbers</span> array remains unchanged.
  </p>

  <div class="api-reference">
    <h4>API Reference</h4>
    <p>
      <strong>Function:</strong> <span class="function-name" translate="no">getUserData(userId)</span>
    </p>
    <p>
      <strong>Parameters:</strong>
      <ul>
        <li><code translate="no">userId</code> (string) - The unique user identifier</li>
      </ul>
    </p>
    <p>
      <strong>Returns:</strong> <code translate="no">Promise&lt;UserData&gt;</code>
    </p>
  </div>
</div>
</body>
</html>

Personal Names and Places

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .bio-container {
    max-width: 600px;
    margin: 20px;
    padding: 30px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
  }
  .profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
  }
  .profile-info h2 {
    margin: 0;
    color: #1e293b;
  }
  .profile-info p {
    margin: 5px 0 0;
    color: #64748b;
  }
  .bio-section {
    margin: 20px 0;
    line-height: 1.8;
    color: #475569;
  }
  .location, .company {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 10px 15px 10px 0;
    color: #64748b;
  }
  .proper-name {
    font-weight: 600;
    color: #1e293b;
  }
</style>
</head>
<body>
<div class="bio-container">
  <div class="profile-header">
    <div class="avatar">JD</div>
    <div class="profile-info">
      <h2 translate="no">João da Silva</h2>
      <p>Senior Software Engineer</p>
    </div>
  </div>

  <div class="bio-section">
    <p>
      Hi! I'm <span class="proper-name" translate="no">João da Silva</span>, a software engineer based in
      <span class="proper-name" translate="no">São Paulo, Brazil</span>. I specialize in building web applications and have worked with companies across the world.
    </p>

    <p>
      I'm originally from <span class="proper-name" translate="no">Porto Alegre</span> but moved to
      <span class="proper-name" translate="no">São Paulo</span> five years ago. I love exploring new technologies and contributing to open source projects.
    </p>

    <div class="location">
      📍 <span translate="no">São Paulo, SP, Brazil</span>
    </div>
    <div class="company">
      🏢 <span translate="no">TechCorp International</span>
    </div>
  </div>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .bio-container {
    max-width: 600px;
    margin: 20px;
    padding: 30px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
  }
  .profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
  }
  .profile-info h2 {
    margin: 0;
    color: #1e293b;
  }
  .profile-info p {
    margin: 5px 0 0;
    color: #64748b;
  }
  .bio-section {
    margin: 20px 0;
    line-height: 1.8;
    color: #475569;
  }
  .location, .company {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 10px 15px 10px 0;
    color: #64748b;
  }
  .proper-name {
    font-weight: 600;
    color: #1e293b;
  }
</style>
</head>
<body>
<div class="bio-container">
  <div class="profile-header">
    <div class="avatar">JD</div>
    <div class="profile-info">
      <h2 translate="no">João da Silva</h2>
      <p>Senior Software Engineer</p>
    </div>
  </div>

  <div class="bio-section">
    <p>
      Hi! I'm <span class="proper-name" translate="no">João da Silva</span>, a software engineer based in
      <span class="proper-name" translate="no">São Paulo, Brazil</span>. I specialize in building web applications and have worked with companies across the world.
    </p>

    <p>
      I'm originally from <span class="proper-name" translate="no">Porto Alegre</span> but moved to
      <span class="proper-name" translate="no">São Paulo</span> five years ago. I love exploring new technologies and contributing to open source projects.
    </p>

    <div class="location">
      📍 <span translate="no">São Paulo, SP, Brazil</span>
    </div>
    <div class="company">
      🏢 <span translate="no">TechCorp International</span>
    </div>
  </div>
</div>
</body>
</html>

Multi-Language Content

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .content {
    max-width: 800px;
    margin: 20px;
    padding: 20px;
  }
  .article {
    background: white;
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
    border: 2px solid #e2e8f0;
  }
  h1, h2 { color: #1e293b; }
  .quote {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
  }
  .quote-author {
    margin-top: 10px;
    font-weight: bold;
    color: #64748b;
  }
  .term {
    font-style: italic;
    color: #8b5cf6;
  }
  .language-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 11px;
    color: #64748b;
    margin-left: 5px;
  }
</style>
</head>
<body>
<div class="content">
  <article class="article">
    <h1>The Art of Cooking: A Global Perspective</h1>

    <p>
      Cooking traditions vary greatly around the world. In France, the concept of
      <span class="term" translate="no" lang="fr">mise en place</span>
      <span class="language-tag">French</span>
      (everything in its place) is fundamental to professional cooking.
    </p>

    <p>
      Japanese cuisine emphasizes
      <span class="term" translate="no" lang="ja">umami</span>
      <span class="language-tag">Japanese</span>,
      often described as the fifth taste alongside sweet, sour, salty, and bitter.
    </p>

    <div class="quote" translate="no" lang="fr">
      "La cuisine, c'est quand les choses ont le goût de ce qu'elles sont."
      <div class="quote-author">
        — Curnonsky
        <span class="language-tag">French</span>
      </div>
    </div>

    <p>
      <em>(Translation: "Cooking is when things taste of what they are.")</em>
    </p>

    <h2>Famous Dishes</h2>
    <ul>
      <li><span translate="no" lang="it">Risotto alla Milanese</span> from Italy</li>
      <li><span translate="no" lang="es">Paella Valenciana</span> from Spain</li>
      <li><span translate="no" lang="th">Pad Thai</span> from Thailand</li>
      <li><span translate="no" lang="fr">Coq au Vin</span> from France</li>
    </ul>
  </article>
</div>
</body>
</html>

Result

Interactive code playground requires JavaScript. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .content {
    max-width: 800px;
    margin: 20px;
    padding: 20px;
  }
  .article {
    background: white;
    padding: 30px;
    border-radius: 12px;
    margin: 20px 0;
    border: 2px solid #e2e8f0;
  }
  h1, h2 { color: #1e293b; }
  .quote {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
  }
  .quote-author {
    margin-top: 10px;
    font-weight: bold;
    color: #64748b;
  }
  .term {
    font-style: italic;
    color: #8b5cf6;
  }
  .language-tag {
    display: inline-block;
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 11px;
    color: #64748b;
    margin-left: 5px;
  }
</style>
</head>
<body>
<div class="content">
  <article class="article">
    <h1>The Art of Cooking: A Global Perspective</h1>

    <p>
      Cooking traditions vary greatly around the world. In France, the concept of
      <span class="term" translate="no" lang="fr">mise en place</span>
      <span class="language-tag">French</span>
      (everything in its place) is fundamental to professional cooking.
    </p>

    <p>
      Japanese cuisine emphasizes
      <span class="term" translate="no" lang="ja">umami</span>
      <span class="language-tag">Japanese</span>,
      often described as the fifth taste alongside sweet, sour, salty, and bitter.
    </p>

    <div class="quote" translate="no" lang="fr">
      "La cuisine, c'est quand les choses ont le goût de ce qu'elles sont."
      <div class="quote-author">
        — Curnonsky
        <span class="language-tag">French</span>
      </div>
    </div>

    <p>
      <em>(Translation: "Cooking is when things taste of what they are.")</em>
    </p>

    <h2>Famous Dishes</h2>
    <ul>
      <li><span translate="no" lang="it">Risotto alla Milanese</span> from Italy</li>
      <li><span translate="no" lang="es">Paella Valenciana</span> from Spain</li>
      <li><span translate="no" lang="th">Pad Thai</span> from Thailand</li>
      <li><span translate="no" lang="fr">Coq au Vin</span> from France</li>
    </ul>
  </article>
</div>
</body>
</html>

When to Use translate=“no”

Always Use translate=“no” For:

✓ Brand names and trademarks: TechPro™, Nike®, Coca-Cola® ✓ Product names: iPhone 15, PlayStation 5 ✓ Person names: María García, João Silva ✓ Place names: São Paulo, München, København ✓ Code examples: variables, functions, syntax ✓ Technical terms: HTML, CSS, JavaScript ✓ Domain names: example.com, github.io ✓ Email addresses: [email protected] ✓ Phone numbers: +1 (555) 123-4567 ✓ Prices and currencies: $99.99, €49,99 ✓ Measurement units: 5kg, 10mph ✓ Serial numbers: ABC-123-DEF

<!-- Brand names -->
<h1><span translate="no">Nike</span> Running Shoes</h1>

<!-- Code examples -->
<code translate="no">console.log('Hello')</code>

<!-- Person names -->
<p>Author: <span translate="no">José García</span></p>

<!-- Places -->
<address translate="no">
  123 Main Street<br>
  São Paulo, SP 01234<br>
  Brazil
</address>

Allow Translation (translate=“yes” or omit) For:

✓ Regular descriptive text ✓ Instructions and help text ✓ UI labels and buttons ✓ Error messages ✓ Marketing copy ✓ Blog posts and articles

<!-- These should be translated -->
<p>Click the button below to continue.</p>
<button>Submit Form</button>
<p class="error">Please enter a valid email address.</p>

Best Practices

1. Combine with lang Attribute

<!-- Specify language for non-translated content -->
<blockquote translate="no" lang="fr">
  Bonjour, comment allez-vous?
</blockquote>

<span translate="no" lang="ja">こんにちは</span>

2. Apply to Smallest Necessary Element

<!-- Good: Specific to brand name -->
<p>Buy <span translate="no">Nike Air Max</span> shoes today!</p>

<!-- Less ideal: Entire paragraph non-translatable -->
<p translate="no">Buy Nike Air Max shoes today!</p>

3. Use for Technical Documentation

<article>
  <h2>Using the <code translate="no">fetch()</code> API</h2>

  <pre translate="no">
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));
  </pre>

  <p>
    The <code translate="no">fetch()</code> function returns a Promise
    that resolves to the Response object.
  </p>
</article>

4. Protect Attribute Values

<!-- Brand name in title attribute -->
<img
  src="logo.png"
  alt="Logo"
  title="TechPro Inc."
  translate="no">

<!-- URLs shouldn't be translated -->
<a href="https://example.com" translate="no">
  Visit our website
</a>

Browser Translation Tools

How Translation Works

Modern browsers offer built-in translation:

Chrome: Right-click → Translate to [Language]
Edge: Right-click → Translate to [Language]
Firefox: Uses extensions like Google Translate
Safari: Translation via extensions

The translate attribute helps these tools:

Skip content marked translate="no"
Maintain proper names and technical terms
Preserve code examples and identifiers

Inheritance

The translate attribute is inherited by descendants:

<!-- All children inherit translate="no" -->
<div translate="no">
  <h1>TechPro X1</h1>
  <p>$299.99</p>
  <code>product_id: 12345</code>
</div>

<!-- Override parent's translate -->
<div translate="no">
  <h1>TechPro X1</h1>
  <p translate="yes">This description can be translated.</p>
  <p>But the price: $299.99 cannot be.</p>
</div>

JavaScript API

const element = document.getElementById('myElement');

// Set translate
element.translate = false;
element.setAttribute('translate', 'no');

// Get current value
console.log(element.translate); // false

// Check if element should be translated
if (element.translate) {
  console.log('Element can be translated');
} else {
  console.log('Element should not be translated');
}

Accessibility Considerations

Screen Readers

The translate attribute:

Does not affect screen reader behavior
Is only a hint for translation tools
Should still be combined with proper semantic HTML

<button translate="no" aria-label="Play">
  ▶
</button>

Language Identification

Always use lang attribute with translate="no":

<!-- Helps screen readers pronounce correctly -->
<span translate="no" lang="es">Hola</span>
<span translate="no" lang="fr">Bonjour</span>
<span translate="no" lang="de">Guten Tag</span>

Common Pitfalls

Testing Translation Behavior

Manual Testing

Chrome: Right-click page → “Translate to [language]”
Edge: Similar to Chrome
Online tools: Google Translate, DeepL, etc.
Check: Verify translate=“no” content remains unchanged

Automated Testing

// Check if translate attribute is set correctly
const brandNames = document.querySelectorAll('.brand-name');
brandNames.forEach(element => {
  if (element.translate !== false) {
    console.warn('Brand name missing translate="no":', element);
  }
});

Browser Support

Universal support across modern browsers:

Browser	Support	Notes
Chrome	19+	Full support
Firefox	66+	Full support
Safari	No	Doesn’t support translate attribute
Edge	79+	Full support

lang - Specifies the language of content
dir - Text direction (LTR/RTL)

The translate Attribute

The translate Attribute

Syntax

Values

Examples

Brand Names and Product Names

Code Examples and Technical Documentation

Personal Names and Places

Multi-Language Content

When to Use translate=“no”

Always Use translate=“no” For:

Allow Translation (translate=“yes” or omit) For:

Best Practices

1. Combine with lang Attribute

2. Apply to Smallest Necessary Element

3. Use for Technical Documentation

4. Protect Attribute Values

Browser Translation Tools

How Translation Works

Inheritance

JavaScript API

Accessibility Considerations

Screen Readers

Language Identification

Common Pitfalls

Testing Translation Behavior

Manual Testing

Automated Testing

Browser Support

Related Attributes

Specifications

The `translate` Attribute