👀 Live Preview
Markup showing mixed translation behavior (browser translate would skip the first line):
API endpoint: /api/v1/users
Welcome to our documentation. Read the guide below.
HTML translate Attribute
Overview
Introduction
The translate attribute is a global HTML feature that controls whether the content inside an element should be automatically translated by browsers and translation tools (such as Chrome’s built-in page translate).
It is especially useful on multilingual sites when you need to protect brand names, product codes, technical terms, or sample text from being incorrectly translated.
What You’ll Learn
yes / no
Two values.
Global
Any element.
Brand names
Keep as-is.
With lang
Language hint.
JavaScript
boolean prop.
Browser translate
Chrome, etc.
Fundamentals
Purpose of translate
The primary purpose of the translate attribute is to indicate whether an element’s text is eligible for machine translation. By default, translation is enabled (yes), but you can opt out with translate="no" for fine-grained control.
This helps multilingual audiences: most of the page can be translated while critical strings (logos as text, API endpoints, code samples) stay unchanged.
Not a replacement for proper localization
translate hints to automatic tools. For professional multilingual sites, still provide human translations and use the lang attribute correctly.
Foundation
📝 Syntax
Add translate to any element with yes or no:
translate.html
<p translate="no">CodeToFun</p>
<p>This paragraph translates by default.</p>Syntax Rules
- Global attribute — valid on any HTML element.
- Values:
yes(default) orno. - Omitting the attribute means translation is allowed.
- Child elements inherit unless they set their own
translatevalue. - IDL property:
HTMLElement.translate(boolean:true= yes,false= no). - Pair with
langon<html>or elements for language context.
Reference
💎 Values
The translate attribute accepts two main values:
yes— Default. Content may be translated by browsers and translation services.no— Content should not be translated (brand names, code, proper nouns).
translate-values.html
<p translate="no">This paragraph will not be translated.</p>
<p>This paragraph will be translated by default.</p>Cheat Sheet
⚡ Quick Reference
| Value | Meaning | Use case |
|---|---|---|
yes (default) | Allow translation | Body copy, instructions |
no | Block translation | Brands, code, URLs |
| JavaScript | el.translate = false | Dynamic toggle |
With lang | Language of text | Multilingual pages |
| Scope | Global attribute | Any element |
| Consumers | Browser translate, MT tools | Not all tools honor it |
Scope
Applicable Elements
| Element | Supported? | Typical use |
|---|---|---|
<p>, <span> | Yes | Paragraphs and inline text |
<h1> – <h6> | Yes | Headings (rarely need no) |
<code>, <pre> | Yes | Protect code from translation |
<a> | Yes | Link text or URLs |
| Any HTML element | Yes | Global attribute |
Compare
translate vs lang vs manual i18n
| Approach | What it does | Best for |
|---|---|---|
translate="no" | Skip auto-translation | Names, code snippets |
lang="fr" | Declares language | Screen readers, hyphenation |
| Separate translated pages | Human-quality copy | Production multilingual sites |
| Browser “Translate page” | Machine translation | User-initiated, respects translate |
Hands-On
Examples Gallery
Block translation on one paragraph, protect a brand name, and toggle translate with JavaScript.
Example — translate yes and no
Two paragraphs with different translation settings:
translate.html
<p translate="no">This paragraph will not be translated.</p>
<p>This paragraph will be translated by default.</p>How It Works
The first paragraph has translate="no", so browser translate features should leave it unchanged. The second paragraph uses the default (yes).
Example — protect brand and code
Common real-world pattern on a multilingual page:
brand.html
<p>
Welcome to <span translate="no">CodeToFun</span> tutorials.
</p>
<code translate="no">console.log("Hello");</code>How It Works
Only the wrapped brand name and code sample opt out of translation; surrounding sentence text can still be translated.
Dynamic Values with JavaScript
Toggle translation eligibility at runtime:
dynamic-translate.html
<p id="dynamicElement">This text starts with translation blocked.</p>
<script>
document.getElementById("dynamicElement").translate = false;
// Later: element.translate = true to allow translation
</script>How It Works
The DOM property translate is a boolean. Set false for no and true for yes. The try-it example includes a button to toggle translation on and off.
A11y
♿ Accessibility
- Use
langfor language — Screen readers uselang, nottranslate, to pick pronunciation. - Do not hide translations from users who need them — Only block auto-translation where it would break meaning (names, code).
- Provide real localized content —
translate="no"is not a substitute for accessible multilingual UX. - Test with browser translate — Verify protected strings stay intact in Chrome and other browsers.
- Keep critical UI in the page language — Use proper i18n for buttons and labels users rely on.
🧠 How translate Works
1
Author sets value
yes or no.
HTML
2
User translates page
Browser feature.
Action
3
Tool skips no
Protected text.
Filter
=
Smarter i18n
Better UX.
Compatibility
Browser Support
The translate attribute is supported in all modern browsers. Chrome, Edge, Firefox, and Safari honor it for built-in translation features.
Universal · Fully supported
Modern browser support
Major browsers respect translate when offering page translation.
100% Modern browsers
Google Chrome Supported
SupportedMozilla Firefox Supported
SupportedApple Safari Supported
SupportedMicrosoft Edge Supported
Supportedtranslate attribute Excellent
Bottom line: Safe to use; test with third-party translation plugins because not every tool honors the attribute.
Pro Tips
💡 Best Practices
✅ Do
- Use
translate="no"on brand names and code - Set
langon the document and foreign-language sections - Apply translate only where auto-translation causes problems
- Test with browser “Translate page” features
- Use boolean
element.translatein JavaScript
❌ Don’t
- Mark entire pages
translate="no"without good reason - Assume all translation services respect the attribute
- Replace professional localization with translate hints alone
- Confuse
translatewithlang - Block translation on user-facing instructions users need in their language
Wrap Up
Conclusion
The translate attribute is a valuable tool for controlling automatic translation of specific elements in HTML. With yes and no, you can protect sensitive strings while letting the rest of the page translate freely.
Combine it with proper lang attributes and human translations for the best multilingual experience.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about translate
Bookmark these when building multilingual pages.
5
Core concepts 01
Auto-translate
Control hint
Purpose 02
Two values
Default yes
Syntax 03
Brand/code
use no
Pattern 04
boolean JS
true/false
Dynamic 05
Plus lang
Not replace
i18n❓ Frequently Asked Questions
It tells browsers and translation tools whether to translate an element’s text.
yes (default) allows translation; no blocks it.Not directly. It improves UX for machine translation. SEO for multiple languages relies on proper
lang, hreflang, and localized content.Use the boolean property:
element.translate = false (no) or true (yes).For brand names, product codes, URLs, and code samples that must not be altered by auto-translation.
No.
lang declares language; translate controls whether automatic translation should run.Practice translation control
Try the yes/no paragraphs and toggle translate with the button example.
About the author
5 people found this page helpful