`lang` HTML global attribute

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das lang globale Attribut hilft dabei, die Sprache eines Elements zu definieren: die Sprache, in der nicht bearbeitbare Elemente geschrieben sind, oder die Sprache, in der die bearbeitbaren Elemente vom Benutzer geschrieben werden sollten. Das Attribut enthält einen einzelnen BCP 47 Sprach-Tag.

Hinweis: Wenn der Wert von lang auf eine leere Zeichenkette gesetzt wird, ist die Sprache explizit unbekannt. Daher wird empfohlen, immer einen geeigneten Wert für dieses Attribut anzugeben.

Probieren Sie es aus

<p>This paragraph is English, but the language is not specifically defined.</p>

<p lang="en-GB">This paragraph is defined as British English.</p>

<p lang="fr">Ce paragraphe est défini en français.</p>

p::before {
  padding-right: 5px;
}

[lang="en-GB"]::before {
  content: "(In British English) ";
}

[lang="fr"]::before {
  content: "(In French) ";
}

Wenn der Attributwert die leere Zeichenkette (lang="") ist, wird die Sprache auf unbekannt gesetzt; wenn der Sprach-Tag gemäß BCP47 ungültig ist, wird er auf ungültig gesetzt.

Selbst wenn das lang Attribut gesetzt ist, könnte es nicht berücksichtigt werden, da das xml:lang Attribut Vorrang hat.

Für die CSS-Pseudoklasse :lang sind zwei ungültige Sprachbezeichnungen unterschiedlich, wenn ihre Namen unterschiedlich sind. Während :lang(es) sowohl lang="es-ES" als auch lang="es-419" entspricht, würde :lang(xyzzy) nicht lang="xyzzy-Zorp!" entsprechen.

Barrierefreiheitsanliegen

Das WCAG Erfolgskriterium 3.1.1 erfordert, dass eine Seiten-Sprache in einer Weise angegeben wird, die „programmatisch bestimmt“ werden kann (d.h. über das lang Attribut).

Das WCAG Erfolgskriterium 3.1.2 erfordert, dass Seiten mit Teilen in verschiedenen Sprachen auch die Sprachen dieser Teile angeben. Auch hier ist das lang Attribut der richtige Mechanismus dafür.

Der Zweck dieser Anforderungen besteht hauptsächlich darin, unterstützende Technologien wie Bildschirmleser in die Lage zu versetzen, die korrekte Aussprache aufzurufen.

Zum Beispiel enthält das Sprachmenü auf dieser Seite (MDN) ein lang Attribut für jeden Eintrag:

html

<div class="dropdown-container language-menu">
  <button
    id="header-language-menu"
    type="button"
    class="dropdown-menu-label"
    aria-haspopup="true"
    aria-owns="language-menu"
    aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
    id="language-menu"
    class="dropdown-menu-items right show"
    aria-expanded="true"
    role="menu">
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fca%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Catalan">
        <bdi lang="ca">Català</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="German">
        <bdi lang="de">Deutsch</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fes%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Spanish">
        <bdi lang="es">Español</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Ffr%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="French">
        <bdi lang="fr">Français</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Japanese">
        <bdi lang="ja">日本語</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fko%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Korean">
        <bdi lang="ko">한국어</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fpt-BR%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Portuguese (Brazilian)">
        <bdi lang="pt-BR">Português (do&nbsp;Brasil)</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fru%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Russian">
        <bdi lang="ru">Русский</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fuk%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Ukrainian">
        <bdi lang="uk">Українська</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        title="Chinese (Simplified)">
        <bdi lang="zh-Hans">中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
        href="proxy.php?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FReference%2FGlobal_attributes%2Flang"
        rel="nofollow"
        id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>

Vererbung

Wenn ein Element kein lang Attribut hat, erbt es den lang Wert, der auf seinem Elternknoten gesetzt ist, welcher wiederum diesen von seinem Elternknoten erben kann, und so weiter.

Spezifikationen

Spezifikation
HTML # attr-lang

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

lang HTML global attribute