Excluding Content

Use this page to keep specific HTML elements from being translated. To protect a recurring brand name or term wherever it appears on the page, see No-Translate Terms instead.

Using data-translate-skip

Add the data-translate-skip attribute to any element to exclude it and all its children from translation:

<!-- This entire section will not be translated -->
<div data-translate-skip>
  <h2>Brand Name</h2>
  <p>Tagline that shouldn't change</p>
</div>

<!-- Single element exclusion -->
<span data-translate-skip>TM</span>

Common Exclusion Scenarios

Brand Names & Trademarks

<header>
  <span data-translate-skip>Acme Healthcare</span>
  <nav><!-- Navigation will be translated --></nav>
</header>

Legal Text

<footer>
  <div data-translate-skip>
    © 2024 Company Name. All rights reserved.
    <a href="/terms">Terms of Service</a>
  </div>
</footer>

Code Snippets

<pre data-translate-skip>
  <code>const apiKey = "your-key-here";</code>
</pre>

Proper Nouns & Technical Terms

<p>
  Our platform integrates with
  <span data-translate-skip>Salesforce</span>, <span data-translate-skip>HubSpot</span>, and
  <span data-translate-skip>Marketo</span>.
</p>

Automatically Excluded Content

The widget automatically skips these elements without any configuration:

For any other content you want to exclude, use the data-translate-skip attribute.

CSS Class Exclusion

You can also use CSS classes for bulk exclusions:

<style>
  .no-translate {
    /* Your styling */
  }
</style>

<div class="no-translate" data-translate-skip>Content to exclude</div>

Parent-Child Inheritance

The data-translate-skip attribute cascades to all child elements:

<article data-translate-skip>
  <!-- Everything in this article is excluded -->
  <h1>Title</h1>
  <p>Paragraph</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</article>

Selective Inclusion (Not Supported)

Currently, there's no way to include a child element if a parent has data-translate-skip. Plan your exclusions at the most specific level needed:

<!-- Don't do this -->
<div data-translate-skip>
  <p data-translate-include>This won't work</p>
</div>

<!-- Do this instead -->
<div>
  <p data-translate-skip>Excluded text</p>
  <p>This will be translated</p>
</div>

Dynamic Content

The data-translate-skip attribute works for dynamically-added content too. Any new elements with this attribute will be automatically excluded.

// Dynamically added content with exclusion
const el = document.createElement('div');
el.setAttribute('data-translate-skip', '');
el.textContent = 'This will not be translated';
document.body.appendChild(el);

Best Practices

1. Be specific: Apply exclusions to the smallest element necessary
2. Brand consistency: Exclude brand names, product names, and trademarks
3. Legal content: Consider excluding legal text that must remain in original language
4. Technical terms: Exclude industry-specific terms that shouldn't be translated
5. Test thoroughly: Verify exclusions work as expected in all languages

Next Steps

• Protect brand names and terms everywhere they appear
• View supported languages
• Common questions