Ausführbare HTML-Docs: lang-Attribut

Q: Was schreibe ich in das lang-Attribut von html?

Einen Sprachcode nach dem Standard BCP 47: en für Englisch, es für Spanisch, fr für Französisch, ja für Japanisch, de für Deutsch. Ergänze eine Region nur, wenn sie wichtig ist, etwa en-US, en-GB oder pt-BR.

Q: Soll ich lang="en" oder lang="en-US" verwenden?

Beides ist gültig. en reicht für die meisten englischen Seiten. Nimm en-US oder en-GB, wenn die regionale Variante wichtig ist, etwa für Rechtschreibung, Datumsangaben oder die Aussprache mancher Wörter. Für deutsche Seiten gilt dasselbe mit de, de-DE, de-AT und de-CH.

Q: Wie markiere ich Text in einer anderen Sprache?

Füg dem Element darum lang hinzu: bon appétit . Screenreader wechseln für diese Wendung die Aussprache, und CSS kann sie mit :lang(fr) stylen.

Q: Was ist der Unterschied zwischen lang und hreflang?

lang sagt, in welcher Sprache der Inhalt eines Elements ist. hreflang steht an einem Link und sagt, in welcher Sprache die verlinkte Seite ist; so verweisen Websites Suchmaschinen auf die anderen Sprachversionen einer Seite.

Die Sprache der Seite festlegen

Setz das Attribut lang an das <html>-Element, mit dem Code der Sprache, in der deine Seite geschrieben ist:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>lang</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>Hello! This page is in English.</p>
  <p id="out" style="color: #6b7280;"></p>
  <script>
    document.getElementById('out').textContent =
      'Page language: ' + document.documentElement.lang +
      '. Your browser language: ' + navigator.language + '.';
  </script>
</body>
</html>

Das Attribut hat auf diesen Absatz keine sichtbare Wirkung, verändert aber, wie die Seite verarbeitet wird: Ein Screenreader liest sie mit englischer Stimme vor, der Browser berücksichtigt es bei der Entscheidung, ob er eine Übersetzung anbietet, und eine Rechtschreibprüfung kann damit das englische Wörterbuch wählen. Ohne das Attribut müssen Tools raten, und ein Screenreader, der auf eine andere Sprache eingestellt ist, liest den englischen Text vielleicht mit falscher Aussprache vor.

Sprachcodes

Der Wert ist ein Sprach-Tag nach dem Standard BCP 47. Die meisten bestehen aus einem zweibuchstabigen Sprachcode, optional gefolgt von einer Region oder einer Schrift:

Code	Sprache
`en`	Englisch
`en-US`, `en-GB`	Englisch, wie es in den USA bzw. in Großbritannien verwendet wird
`es`, `es-MX`	Spanisch, Spanisch in Mexiko
`pt-BR`	Portugiesisch in Brasilien
`fr`, `de`, `it`	Französisch, Deutsch, Italienisch
`ar`, `he`	Arabisch, Hebräisch (von rechts nach links, siehe unten)
`ja`, `ko`	Japanisch, Koreanisch
`zh-Hans`, `zh-Hant`	Chinesisch in vereinfachten bzw. traditionellen Schriftzeichen

Bei den Codes spielt Groß- und Kleinschreibung keine Rolle, die Konvention ist aber eine kleingeschriebene Sprache und eine großgeschriebene Region. Ergänze eine Region nur, wenn die Variante wichtig ist; en ist ein vollständiger und korrekter Wert.

Was lang sichtbar verändert

Die meisten Wirkungen von lang betreffen Software, aber ein paar zeigen sich auf dem Bildschirm. Die Anführungszeichen des <q>-Elements folgen der Sprache, und die Regeln für Groß- und Kleinschreibung ebenfalls:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Visible effects</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; font-size: 18px; }
    td { padding: 4px 12px; border-bottom: 1px solid #e5e7eb; }
    .up { text-transform: uppercase; }
  </style>
</head>
<body>
  <table>
    <tr><td>English</td><td lang="en"><q>quote</q></td><td lang="en" class="up">istanbul</td></tr>
    <tr><td>French</td><td lang="fr"><q>quote</q></td><td lang="fr" class="up">istanbul</td></tr>
    <tr><td>German</td><td lang="de"><q>quote</q></td><td lang="de" class="up">istanbul</td></tr>
    <tr><td>Japanese</td><td lang="ja"><q>quote</q></td><td lang="ja" class="up">istanbul</td></tr>
    <tr><td>Turkish</td><td lang="tr"><q>quote</q></td><td lang="tr" class="up">istanbul</td></tr>
  </table>
</body>
</html>

Jede Zeile bekommt ihre eigene Art von Anführungszeichen. In der letzten Spalte ergibt dasselbe text-transform: uppercase im Englischen „ISTANBUL“ und im Türkischen „İSTANBUL“, weil das Türkische den Punkt auf dem großen i behält. Ändere das lang der türkischen Zeile in en, und der Punkt verschwindet. Auch die automatische Silbentrennung (hyphens: auto in CSS) hängt von lang ab: Der Browser muss die Sprache kennen, um zu wissen, wo Wörter getrennt werden dürfen.

Wendungen in einer anderen Sprache markieren

lang funktioniert an jedem Element, nicht nur an <html>. Wenn eine Seite in einer Sprache eine Wendung in einer anderen zitiert, umschließ die Wendung und gib ihr einen eigenen Code. CSS kann Sprachen mit dem Selektor :lang() ansprechen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mixed languages</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    :lang(fr), :lang(es) { font-style: italic; color: #2563eb; }
  </style>
</head>
<body>
  <p>The chef said <span lang="fr">bon appétit</span> and left.</p>
  <p>Our team motto is <span lang="es">poco a poco</span>: little by little.</p>
</body>
</html>

Ein Screenreader wechselt für „bon appétit“ zur französischen Aussprache und danach zurück zum Englischen. :lang(fr) passt auch auf fr-CA und jede andere französische Variante, und es passt auf Elemente, die die Sprache von einem Vorfahren erben, was ein Attributselektor wie [lang="fr"] verpassen würde.

Sprachen von rechts nach links: dir

Arabisch, Hebräisch, Persisch und Urdu werden von rechts nach links geschrieben. lang benennt die Sprache; das Attribut dir legt die Richtung fest. Eine ganze Seite auf Arabisch verwendet beides an <html>:

<html lang="ar" dir="rtl">

Für eine kurze Wendung von rechts nach links in einer Seite, die von links nach rechts läuft, setzt du beides an das Element darum:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dir</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    blockquote { border-inline-start: 4px solid #16a34a; margin: 12px 0; padding-inline-start: 12px; }
  </style>
</head>
<body>
  <p>The Arabic word for hello is <span lang="ar" dir="rtl">مرحبا</span>.</p>
  <blockquote lang="ar" dir="rtl">مرحبا بكم في الموقع</blockquote>
</body>
</html>

Das blockquote richtet sich rechts aus, und sein grüner Balken wandert ebenfalls nach rechts, weil border-inline-start der Richtung folgt. Mit logischen Eigenschaften wie margin-inline-start statt margin-left bleiben Layouts in beiden Richtungen richtig.

lang vs. hreflang

lang beschreibt den Inhalt eines Elements. hreflang steht an einem Link und beschreibt die Seite, auf die er zeigt. Websites mit Übersetzungen führen jede Version im <head> auf, damit Suchmaschinen jeden Leser zur richtigen schicken können:

<link rel="alternate" hreflang="en" href="https://example.com/">
<link rel="alternate" hreflang="de" href="https://example.com/de/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Jede übersetzte Seite setzt trotzdem ihr eigenes lang an <html>: lang="de" an der deutschen.

Häufige Fehler

lang weglassen. Viele Templates vergessen es; setz es auf jeder Seite, direkt beim Doctype.
lang="en" in übersetzte Seiten kopieren. Eine deutsche Seite, die als Englisch markiert ist, wird mit englischer Aussprache vorgelesen. Pass es an den Inhalt an.
Einen Ländercode als Sprache verwenden. lang="jp" und lang="gr" sind nicht Japanisch und Griechisch; die Codes lauten ja und el.
lang verwenden, um die Richtung festzulegen. lang="ar" allein lässt Text nicht von rechts nach links laufen. Füg dir="rtl" hinzu.
lang="en_US" schreiben. Das Trennzeichen ist ein Bindestrich: en-US.

Häufig gestellte Fragen

Was macht das lang-Attribut in HTML?

Es gibt die Sprache des Inhalts eines Elements an. Screenreader wählen damit die richtige Stimme und Aussprache, Browser nutzen es, um eine Übersetzung anzubieten, Anführungszeichen zu wählen und Silbentrennung anzuwenden, und manche Rechtschreibprüfungen wählen damit ein Wörterbuch.

Was schreibe ich in das lang-Attribut von html?

Einen Sprachcode nach dem Standard BCP 47: en für Englisch, es für Spanisch, fr für Französisch, ja für Japanisch, de für Deutsch. Ergänze eine Region nur, wenn sie wichtig ist, etwa en-US, en-GB oder pt-BR.

Soll ich lang="en" oder lang="en-US" verwenden?

Beides ist gültig. en reicht für die meisten englischen Seiten. Nimm en-US oder en-GB, wenn die regionale Variante wichtig ist, etwa für Rechtschreibung, Datumsangaben oder die Aussprache mancher Wörter. Für deutsche Seiten gilt dasselbe mit de, de-DE, de-AT und de-CH.

Beeinflusst das lang-Attribut SEO?

Google hat gesagt, dass es die Sprache aus dem Text selbst erkennt und sich nicht auf das lang-Attribut verlässt. Setz es trotzdem richtig: Andere Suchmaschinen, Übersetzungstools und Screenreader nutzen es. Um übersetzte Versionen einer Seite zu verknüpfen, nimm hreflang-Links.

Wie markiere ich Text in einer anderen Sprache?

Füg dem Element darum lang hinzu: <span lang="fr">bon appétit</span>. Screenreader wechseln für diese Wendung die Aussprache, und CSS kann sie mit :lang(fr) stylen.

Was ist der Unterschied zwischen lang und hreflang?

lang sagt, in welcher Sprache der Inhalt eines Elements ist. hreflang steht an einem Link und sagt, in welcher Sprache die verlinkte Seite ist; so verweisen Websites Suchmaschinen auf die anderen Sprachversionen einer Seite.

Verwandte Konzepte