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.

<p>Built with <span translate="no">Vanilla Breeze</span>.</p>  <p>Run <code translate="no">npm install vanilla-breeze</code> to get started.</p>  <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