HTMLElement.translate — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.translate

Beschreibung

Die Eigenschaft translate des HTMLElement-Interfaces spiegelt das globale HTML-Attribut translate wider. Sie gibt an, ob der Inhalt der Text-Knoten eines Elements und seine übersetzbaren Attribute (z. B. title, alt, placeholder, aria-label) übersetzt werden sollen, wenn die Seite lokalisiert wird. Das betrifft vor allem automatische Übersetzungsdienste wie Google Translate, die Übersetzungsfunktion im Browser oder Lokalisierungswerkzeuge.

Beim Lesen erhältst du true, wenn das Element übersetzt werden darf, sonst false. Der Wert wird vererbt: Fehlt das Attribut, gilt der Zustand des Elternelements. Das Wurzelelement ist standardmäßig übersetzbar. Setzt du element.translate = false, schreibt der Browser translate="no" ins Markup, bei true wird es zu translate="yes".

Typische Einsatzfälle sind Markennamen, Produktbezeichnungen, Code-Schnipsel, Benutzernamen, Adressen oder Fachbegriffe, die in jeder Sprache unverändert bleiben sollen. Besonders nützlich ist die Eigenschaft bei dynamisch erzeugtem Inhalt, wenn du etwa Benutzereingaben oder Codeblöcke per JavaScript einfügst und diese vor einer automatischen Übersetzung schützen willst.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	geerbt (Wurzel: true)	Beim Setzen: `true` erlaubt die Übersetzung (`translate="yes"`), `false` verhindert sie (`translate="no"`).

Rückgabewert

Typ

boolean

Beschreibung

true, wenn Inhalt und übersetzbare Attribute des Elements übersetzt werden dürfen (auch per Vererbung), sonst false.

Beispiele

Übersetzungsstatus auslesen (inklusive Vererbung)

// HTML: <div translate="no"><span id="marke">Programmierung.net</span></div>
const span = document.querySelector('#marke');

console.log(span.translate);                     // geerbt vom div
console.log(span.hasAttribute('translate'));     // eigenes Attribut?
console.log(document.documentElement.translate); // Wurzel

false false true

Codeblöcke vor automatischer Übersetzung schützen

// Alle Code-Elemente sollen unverändert bleiben
document.querySelectorAll('pre, code, kbd').forEach((el) => {
  el.translate = false;
});

const first = document.querySelector('code');
console.log(first?.getAttribute('translate'));

no

Dynamisch eingefügte Benutzernamen kennzeichnen

const renderComment = ({ author, text }) => {
  const article = document.createElement('article');

  const name = document.createElement('strong');
  name.textContent = author;
  name.translate = false; // Namen nie übersetzen

  const body = document.createElement('p');
  body.textContent = text; // Kommentartext darf übersetzt werden

  article.append(name, body);
  return article;
};

const node = renderComment({ author: 'Rose Baker', text: 'Toller Artikel!' });
document.body.append(node);
console.log(node.outerHTML);

<article><strong translate="no">Rose Baker</strong><p>Toller Artikel!</p></article>

Übersetzung innerhalb eines gesperrten Bereichs wieder erlauben

const wrapper = document.createElement('div');
wrapper.translate = false;

const hint = document.createElement('p');
hint.textContent = 'Dieser Hinweis darf übersetzt werden.';
hint.translate = true; // überschreibt die Vererbung

wrapper.append(hint);
document.body.append(wrapper);

console.log(wrapper.translate, hint.translate);
console.log(hint.getAttribute('translate'));

false true yes

// Wichtig · Fallstricke

Nur ein Hinweis: translate ist ein Hinweis für Übersetzungswerkzeuge. Ob ein Dienst (Browser-Übersetzung, Google Translate, Erweiterungen) sich daran hält, liegt beim Dienst. Einige Werkzeuge beachten zusätzlich die Klasse notranslate. Wer sichergehen will, setzt beides.
Vererbung beachten: Der gelesene Wert ist der berechnete Zustand und nicht zwingend das eigene Attribut. Ob ein Element das Attribut selbst trägt, prüfst du mit hasAttribute('translate').
Nur spezielle Attributwerte: Im Markup gelten nur yes, no und der leere String (entspricht yes). Andere Werte wie translate="false" sind ungültig und führen zur Vererbung, nicht zu „nicht übersetzen“.
Welche Attribute betroffen sind: Die Einstellung gilt nur für übersetzbare Attribute (z. B. title, alt, placeholder, label, aria-label), nicht für href, class oder id.
Kompatibilität: Das HTML-Attribut funktioniert in allen Browsern. Die DOM-Eigenschaft ist seit 2023 in Chrome, Edge, Safari und Firefox (ab Version 111) verfügbar. In älteren Browsern ist el.translate undefined, dann hilft setAttribute('translate', 'no') als Rückfalllösung.
Für die Sprachangabe selbst ist lang zuständig, nicht translate.

Siehe auch

HTMLElement.lang HTMLElement.dir HTMLElement.title Element.setAttribute() Element.hasAttribute() HTMLElement HTMLFormElement.noValidate