HTML lang globales Attribut

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

Das lang globale Attribut hilft, 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 ein einzelnes BCP 47 Sprach-Tag.

Hinweis: Wenn der Wert von lang auf einen leeren String gesetzt ist, 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 der leere String (lang="") ist, wird die Sprache auf unbekannt gesetzt; Wenn das Sprach-Tag gemäß BCP47 nicht gültig ist, wird es auf ungültig gesetzt.

Selbst wenn das lang-Attribut gesetzt ist, wird es möglicherweise nicht beachtet, da das xml:lang-Attribut Priorität hat.

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

Barrierefreiheit

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

Das WCAG Erfolgsmerkmal 3.1.2 erfordert, dass Seiten mit Teilen in unterschiedlichen Sprachen auch die Sprachen dieser Teile spezifiziert haben. Auch hier ist das lang-Attribut der richtige Mechanismus dafür.

Der Zweck dieser Anforderungen ist in erster Linie, unterstützende Technologien wie Bildschirmlesegeräte in die Lage zu versetzen, die korrekte Aussprache anzuwenden.

Beispielsweise 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="/ca/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Catalan">
        <bdi lang="ca">Català</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/de/docs/Web/HTML/Reference/Global_attributes/lang"
        title="German">
        <bdi lang="de">Deutsch</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/es/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Spanish">
        <bdi lang="es">Español</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/fr/docs/Web/HTML/Reference/Global_attributes/lang"
        title="French">
        <bdi lang="fr">Français</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/ja/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Japanese">
        <bdi lang="ja">日本語</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/ko/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Korean">
        <bdi lang="ko">한국어</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/pt-BR/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Portuguese (Brazilian)">
        <bdi lang="pt-BR">Português (do&nbsp;Brasil)</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/ru/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Russian">
        <bdi lang="ru">Русский</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/uk/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Ukrainian">
        <bdi lang="uk">Українська</bdi>
      </a>
    </li>
    <li role="menuitem">
      <a
        href="/zh-CN/docs/Web/HTML/Reference/Global_attributes/lang"
        title="Chinese (Simplified)">
        <bdi lang="zh-Hans">中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
        href="/en-US/docs/Web/HTML/Reference/Global_attributes/lang"
        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 übergeordneten Knoten gesetzt ist, der ihn wiederum von seinem übergeordneten Knoten erben kann, und so weiter.

Spezifikationen

Specification
HTML # attr-lang

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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