HTML translate Attribute

The HTML translate global attribute specifies whether an element's text and translatable attribute values should be translated when a page is localized. It can be used to protect content such as product names, commands, code, or other text that should remain unchanged.

Elements That Use the translate Attribute

The translate attribute is a global attribute and can be specified on all HTML elements.

translate Attribute Value

The translate attribute is an enumerated attribute with two keywords: yes and no.

Value	Description
`yes`	Indicates that the element's translatable content should be translated when the page is localized.
`no`	Indicates that the element's content should remain unchanged when the page is localized.

An empty value, such as translate="", represents the yes state. If the attribute is missing or contains an invalid value, the element normally inherits its translation mode from its parent.

The yes Value

Use translate="yes" when the element's text and applicable translatable attribute values should be translated during localization.

<p translate="yes">Welcome to our website.</p>

The element is placed in the translate-enabled state. Its text and applicable translatable attributes can be translated when the page is localized.

The no Value

Use translate="no" for content that should remain unchanged when the surrounding page is translated.

<p>Enter the command <kbd translate="no">save document</kbd> to continue.</p>

In this example, the surrounding instructions can be translated while the command save document remains unchanged.

Translation Inheritance

When an element does not specify its own translation state, it normally inherits the translation mode of its parent. This makes it possible to protect an entire section from translation and then enable translation again for a specific descendant.

<div translate="no">
  <p>KD Web Hosting Design</p>
  <p translate="yes">Learn more about our services.</p>
</div>

The first paragraph inherits the no-translate state from the <div>. The second paragraph explicitly uses translate="yes", so its content can be translated.

If an element has no parent and does not specify a translation state, its translation mode is translate-enabled.

Translatable Attributes

The translation mode applies not only to text nodes but also to HTML attributes that the standard defines as translatable. These include attributes such as alt on images, placeholder on form controls, title on HTML elements, and certain label and value attributes.

<img src="product.png"
     alt="Blue garden container"
     title="View product details">

When the element is in the translate-enabled state, applicable text such as the alt and title values can be translated during localization. When the element is in the no-translate state, its attribute values and text content are left unchanged.

When to Prevent Translation

The translate="no" value can be useful for content that should retain its original wording regardless of the language of the surrounding page.

Examples can include product or brand names, computer commands, program names, usernames, identifiers, or other text whose meaning depends on keeping the exact original wording.

<p>Open <span translate="no">Example Editor</span> to continue.</p>

Use translate="no" only when there is a reason for the content to remain unchanged. Ordinary page content should generally remain available for translation.

Common Mistakes

Do not treat translate as a boolean attribute. Use the defined values yes and no when explicitly setting the translation mode.

Do not assume that omitting translate always creates a new translate-enabled state. A missing attribute normally causes the element to inherit its parent's translation mode.

Do not use translate="no" on large sections of ordinary content simply to prevent automatic translation. Doing so can prevent localization tools from translating information users need.

Do not confuse the HTML translate attribute with the CSS translate property. The HTML attribute controls localization behavior, while the CSS property changes an element's visual position.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The translate global attribute is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the translate Attribute

The example contains normal translatable text and a product name marked with translate="no". Translation tools that recognize the attribute can leave the protected text unchanged while translating the surrounding content.

Play in Editor

Summary

The HTML translate global attribute controls whether an element's text and translatable attribute values should be translated when a page is localized. The yes value enables translation and no indicates that the content should remain unchanged. When the attribute is omitted, the translation mode normally inherits from the parent element.