WSS
Web Specification Studio Home
On this page
InternationalisationOptionalUpdated

translate attribute for untranslatable content

The translate attribute marks content that automatic translation systems must leave alone - brand names, code, and identifiers. Use translate="no" so Google Translate and the browser's built-in translation don't mangle terms that have no localised form.

What it is

translate is a global HTML attribute that tells automatic translation systems whether an element’s text - and its translatable attribute values, like alt and title - should be translated when the page is localised. It takes two values: yes (the empty string also means yes) and no.

<footer>
  <small>© 2026 <span translate="no">Verschlimmbessern Inc.</span></small>
</footer>

The value inherits: set translate="no" on an element and every descendant is excluded too, until a child sets translate="yes" again. The default for the document is “yes” - everything is translatable unless you say otherwise.

This is the opposite concern to the lang attribute. lang declares what language content is in so assistive tech and browsers handle it correctly; translate declares what must not be machine-translated at all. The two are complementary, not interchangeable.

Why it matters

Browsers do not act on translate for rendering, but it is respected by the systems that actually translate pages: Google Translate, the browser’s built-in page translation (Chrome, Edge, Safari, Firefox), and many tools used by human translators. Without it, those systems happily translate things that should never change:

  • Brand and product names become nonsense in the target language.
  • Code, commands, and file paths get “translated” and stop working when copied.
  • Proper nouns and identifiers - usernames, SKUs, legal entity names - get altered.

Marking this content is the author’s job; the translation system has no other way to know a string is a brand name rather than an ordinary noun.

How to implement

Add translate="no" to the smallest element that wraps the untranslatable text.

<p>Install it with <code translate="no">npm install astro</code>.</p>
<p>Your order <span translate="no">#A-4815</span> has shipped.</p>
<p>Written by <span translate="no">Joost de Valk</span>.</p>

Good candidates: brand names, code samples, keyboard shortcuts, email addresses, and any string a reader will copy verbatim. The attribute is Baseline widely available, so no fallback is needed.

Common mistakes

  • Putting translate="no" on <html> or <body>. That opts the whole page out of translation - exactly what most multilingual readers do not want. Mark spans, not pages.
  • Confusing it with lang. lang="en" does not stop translation, and translate="no" does not declare a language. Untranslatable foreign-language terms often want both.
  • Forgetting attributes are covered too. translate="no" on an <img> also protects its alt and title - useful for a logo whose alt text is the brand name.

Machine Translation Engine Compliance & Inherited Element Exclusions

Preventing machine translation artifacts across globalized content requires leveraging the WHATWG translate attribute inheritance model:

  • HTML Specification Inheritance Hierarchy: The translate attribute inherits down the DOM tree. Declaring translate="no" on a parent element (e.g. <div translate="no">) protects all nested child elements from machine translation (Google Translate, Safari Web Translation, Chrome Translate). To re-enable translation for a specific sub-element inside an untranslated container, set translate="yes" on that child element (<p translate="yes">).
  • Protecting Code Snippets and Brand Identifiers: Always apply translate="no" to code blocks (<code>, <pre>), terminal commands, SKUs, API parameters, and registered trademarks. Machine translation engines automatically translate unflagged code tokens (e.g., converting npm run build into foreign phrase equivalents), rendering code examples unexecutable.
  • Attribute Protection (alt, title, placeholder): Placing translate="no" on elements with textual attributes (e.g. <img src="logo.svg" alt="Company Name" translate="no">) protects attribute string values from machine translation alongside element inner text.

Verification

  • Inspect brand names, code snippets, and SKUs in DevTools to confirm translate="no" is present on wrapping containers.
  • Test page in Chrome or Safari built-in translation to verify marked elements remain untouched in their original form.
  • Verify that alt and title attributes on translate="no" elements are preserved during auto-translation.

Related topics

Sources & further reading

Add as a preferred source on Google