HTML lang global attribute
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính toàn cục lang giúp xác định ngôn ngữ của một phần tử: ngôn ngữ mà các phần tử không thể chỉnh sửa được viết bằng, hoặc ngôn ngữ mà các phần tử có thể chỉnh sửa nên được người dùng viết bằng. Thuộc tính chứa một BCP 47 language tag duy nhất.
Note:
Nếu giá trị của lang được đặt thành chuỗi rỗng, ngôn ngữ được xác định là hoàn toàn không xác định. Do đó, nên luôn chỉ định một giá trị phù hợp cho thuộc tính này.
Try it
<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) ";
}
Nếu giá trị thuộc tính là chuỗi rỗng (lang=""), ngôn ngữ được đặt là không xác định; nếu thẻ ngôn ngữ không hợp lệ theo BCP47, ngôn ngữ được đặt là không hợp lệ.
Ngay cả khi thuộc tính lang được đặt, nó có thể không được tính đến, vì thuộc tính xml:lang có ưu tiên cao hơn.
Đối với lớp giả CSS :lang, hai tên ngôn ngữ không hợp lệ là khác nhau nếu tên của chúng khác nhau. Vì vậy, trong khi :lang(es) khớp cả lang="es-ES" và lang="es-419", :lang(xyzzy) sẽ không khớp với lang="xyzzy-Zorp!".
Vấn đề trợ năng
Tiêu chí thành công WCAG 3.1.1 yêu cầu rằng ngôn ngữ của trang được chỉ định theo cách có thể 'xác định theo chương trình' (tức là thông qua thuộc tính lang).
Tiêu chí thành công WCAG 3.1.2 yêu cầu rằng các trang có các phần bằng các ngôn ngữ khác nhau cũng phải chỉ định ngôn ngữ của những phần đó. Một lần nữa, thuộc tính lang là cơ chế đúng đắn cho điều này.
Mục đích của các yêu cầu này chủ yếu là để cho phép các công nghệ hỗ trợ như trình đọc màn hình gọi đúng cách phát âm.
Ví dụ, menu ngôn ngữ trên trang web này (MDN) bao gồm thuộc tính lang cho mỗi mục:
<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 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="/vi/docs/Web/HTML/Reference/Global_attributes/lang"
rel="nofollow"
id="translations-add">
Add a translation
</a>
</li>
</ul>
</div>
Kế thừa
Nếu một phần tử không có thuộc tính lang, nó sẽ kế thừa giá trị lang được đặt trên nút cha của nó, mà lần lượt có thể kế thừa nó từ cha của nó, và cứ thế tiếp tục.
Đặc tả
| Specification |
|---|
| HTML # attr-lang |
Tương thích trình duyệt
Xem thêm
- Tất cả thuộc tính toàn cục.
- HTTP Header
Content-Language - Thuộc tính HTML
translate