Use "translate" to turn off element translations

I just discovered an HTML attribute I haven't seen in my 15y of web development — translate.

If certain elements are untranslatable, you can use the translate HTML attribute to opt out of automatic localization and signal browsers not to touch them. When would that be useful?

I could come up with a made-up example, but let's just look at Cory House's website and translate it to German using Google Chrome.

The translation isn't really good. "About" becomes "Um", which doesn't make sense in German, but the translation has a bigger issue. Cory's name was translated, too. The English House became a German Haus.

Google Chrome just renamed a person. 😱

This situation is where the translate attribute comes in handy. A tiny HTML tweak will help Cory keep his name in any language.

<h1 class="site-title" translate="no">
  <a href="https://www.bitnative.com/">Cory House</a>
</h1>

translate="no" disables the localization of an element's text node and, theoretically, even certain attributes. The spec defines a whole lot of translatable attributes, including an image's alt attribute or content on meta elements.

Do browsers really translate all of them? I don't know and didn't test if and how this all works. So, be aware there might be issues if you expect attributes to be translated.

For example, aria-label is theoretically translatable(translatable attributes in ARIA spec), but automatic aria-label translation isn't working well in practice.

Either way, knowing how to turn off translation for names and such is definitely useful, and if you're building something that includes user names, adding a translate="no" to avoid name theft doesn't hurt.