translate
Tell translation tools whether content should be translated. Use translate='no' for brand names, code snippets, and technical terms.
Overview
The translate attribute tells translation tools — Google Translate, browser auto-translate, and machine translation APIs — whether an element's content should be translated. By default, all content is translatable. Set translate="no" on content that should remain in its original language.
Values
| Value | Behavior |
|---|---|
yes | Content should be translated (the default). No attribute needed. |
no | Content should not be translated. Inherited by child elements. |
<!-- Brand names should not be translated --><p>Built with <span translate="no">Vanilla Breeze</span>.</p> <!-- Code should not be translated --><p>Run <code translate="no">npm install vanilla-breeze</code> to get started.</p> <!-- Regular prose is translatable by default (no attribute needed) --><p>This paragraph will be translated normally.</p>When to Use translate="no"
Mark content as non-translatable when translation would break meaning or functionality:
- Brand names: Vanilla Breeze, GitHub, Eleventy
- Code snippets:
npm install,<div class="example"> - Technical terms: API endpoints, CSS property names, HTML attribute names
- Proper nouns: personal names, place names that should not be localized
- Identifiers: API keys, order numbers, serial numbers
- Command-line instructions: terminal commands, file paths
- Programming keywords:
function,return,const
When to Keep the Default
Regular content is translatable by default — you do not need to add translate="yes". Leave the attribute off for:
- Regular prose and paragraphs
- UI labels and button text
- Error messages and help text
- Navigation links
- Headings and descriptions
Code Documentation
Technical documentation frequently mixes translatable prose with non-translatable code. Use translate="no" on code blocks to protect them.
<article> <h2>Getting Started</h2> <p>Install the package using your preferred package manager:</p> <pre><code translate="no">npm install vanilla-breeze</code></pre> <p>Then import the stylesheet in your HTML:</p> <pre><code translate="no"><link rel="stylesheet" href="vanilla-breeze.css" /></code></pre> <p>The framework provides native element styling out of the box.</p></article>The code Element
Many translation tools already treat <code> content as non-translatable, but this is a heuristic, not a guarantee. Adding translate="no" is the explicit, standards-based declaration.
Brand Names
Wrap brand names in <span translate="no"> so they survive translation intact. This is especially important when brand names contain common words that a translator might convert.
<header> <h1><span translate="no">Vanilla Breeze</span> Documentation</h1> <p>A lightweight CSS framework built on native HTML.</p></header> <footer> <p>Powered by <span translate="no">Vanilla Breeze</span>. Hosted on <span translate="no">GitHub Pages</span>. Built with <span translate="no">Eleventy</span>.</p></footer>Forms with Mixed Content
Form labels should be translated, but values like API keys and endpoints should not.
<form> <label for="name">Name</label> <input type="text" id="name" /> <label for="api-key">API Key</label> <input type="text" id="api-key" translate="no" /> <label for="endpoint">Endpoint</label> <input type="url" id="endpoint" translate="no" value="https://api.example.com/v1/users" /> <button type="submit">Save Settings</button></form>Legacy: class="notranslate"
Before the translate attribute was standardized, the convention was class="notranslate" — a class recognized by Google Translate. The translate="no" attribute is the standard approach and is supported by all modern browsers and translation tools. There is no need to use both.
| Approach | Standard | Google Translate | Browser Translate |
|---|---|---|---|
translate="no" | Yes (HTML spec) | Yes | Yes |
class="notranslate" | No (convention) | Yes | Varies |