HTML translate attribute: keep commands intact when a page is localized

Set translate="no" on an HTML element whose words must stay unchanged during localization. Surrounding instructions can still be translated. Use translate="yes" inside a protected region when a particular child needs translation again. The attribute describes translation intent; it neither translates the page itself nor guarantees that every translation tool will honor it.

A fictional equipment setup note tells technicians to enter RESET ALL into a device console. Translating the surrounding sentence helps the reader. Translating the command would give the technician different characters to type. Protect the command where it appears, rather than excluding the entire setup note from translation.

<p>Enter <kbd translate="no">RESET ALL</kbd> at the device prompt.</p>

The HTML standard's translate definition covers text and translatable attributes. Keep exact strings inside an element marked for that purpose so the decision travels with the markup.

Protect the smallest useful region

Commands, product identifiers, and original program output often need to remain exact. The explanation of those values usually needs to follow the reader's language.

<p>Choose <span translate="no">Northstar Control</span>,
then enter <code translate="no">device --status</code>.</p>
<p>The device responds:</p>
<pre><samp translate="no">MODE: READY</samp></pre>

These names and strings are illustrative. Replace them with the real product name and actual command before publishing an instruction. Do not mark a generic word as untranslatable merely because it appears in a heading or button.

If the real application ships translated button labels, write the localized label in the instructions. If the application always shows an English label, keeping that exact label can help readers find it. That decision depends on the product interface the reader will actually use.

Inheritance applies to nested text

When an element omits translate, it inherits its parent's translation mode. An empty value, such as <span translate>, enables translation. translate="no" disables it. This attribute is enumerated, so translate="false" is not the spelling for disabling translation.

Sometimes one protected record includes a phrase that should translate:

<section translate="no" aria-labelledby="device-heading">
  <h2 id="device-heading">NX-410</h2>
  <p>RESET ALL</p>
  <p translate="yes">Use only after saving the current configuration.</p>
</section>

Here the model number and command inherit the no-translate mode. The final paragraph explicitly enables translation. In a larger document, protecting only the model and command individually is easier to maintain than keeping an entire section excluded and remembering exceptions.

Check attribute text as well as visible text

Translation mode also concerns translatable attributes. For example, title, image alt, and form placeholder contain human-readable text. Marking a parent translate="no" can unintentionally exclude those instructions too.

<p>
  <span translate="no">NX-410</span>
  <img src="status-light.png" alt="Green status light is on">
</p>

The model name is protected; the image's description remains eligible for translation. Putting translate="no" on the entire paragraph would make that a different instruction to the localization process. Keep the description about what the image communicates, rather than copying a product identifier into every text attribute.

The attribute does not rename a file, rewrite a URL, or change the text stored in your source document by itself. It supplies a rule for the localization process that reads the markup. Check the actual tool's resulting output, including its treatment of accessible text.

Language and reading direction have separate jobs

lang="en" identifies English content; it does not mean "do not translate." dir="ltr" sets reading direction; it does not protect a command. A command inside an Arabic instruction may need all three decisions:

<p lang="ar" dir="rtl">
  أدخل <code lang="en" dir="ltr" translate="no">RESET ALL</code>
</p>

The instruction says to enter the command. The code stays in its original English form and left-to-right direction. The HTML direction guide explains isolating mixed text and punctuation; translation mode alone does not solve those layout issues.

Verify the localized instruction against the real interface

Run the actual page through the translation or localization system your readers will encounter. Read the surrounding instruction in the target language, then compare RESET ALL character for character with the original command. Also inspect the image description, button labels, and hover text. An unchanged command beside an untranslated warning would leave the task only partly solved.

If a service ignores the attribute, use that service's supported exclusion mechanism and keep a localized output check. Do not assume the presence of translate="no" proves the delivered translation is correct. The technician needs a readable instruction and the exact characters the device accepts.

Keep reading