Tài liệu HTML chạy trực tiếp: Thuộc tính lang

Q: Nên ghi gì vào thuộc tính lang của thẻ html?

Một mã ngôn ngữ theo chuẩn BCP 47: en cho tiếng Anh, es cho tiếng Tây Ban Nha, fr cho tiếng Pháp, ja cho tiếng Nhật. Chỉ thêm vùng khi điều đó quan trọng, như en-US, en-GB hoặc pt-BR.

Q: Nên dùng lang="en" hay lang="en-US"?

Cả hai đều hợp lệ. en là đủ cho hầu hết các trang tiếng Anh. Dùng en-US hoặc en-GB khi biến thể theo vùng có ý nghĩa, chẳng hạn với chính tả, ngày tháng hoặc cách phát âm một số từ.

Q: Làm sao đánh dấu một đoạn văn bản bằng ngôn ngữ khác?

Thêm lang vào phần tử bao quanh nó: bon appétit . Trình đọc màn hình sẽ đổi cách phát âm cho cụm từ đó, và CSS có thể định dạng nó bằng :lang(fr).

Q: lang và hreflang khác nhau thế nào?

lang cho biết nội dung của một phần tử viết bằng ngôn ngữ nào. hreflang đặt trên một liên kết và cho biết trang được liên kết tới viết bằng ngôn ngữ nào, đây là cách các trang web chỉ cho công cụ tìm kiếm biết các phiên bản ngôn ngữ khác của một trang.

Thuộc tính lang trong HTML: mã ngôn ngữ và tác dụng của nó

Thuộc tính lang cho trình duyệt, trình đọc màn hình và công cụ dịch biết nội dung của bạn viết bằng ngôn ngữ nào. Tìm hiểu nên đặt nó ở đâu, dùng mã nào (en, en-US, pt-BR), cách đánh dấu một cụm từ bằng ngôn ngữ khác và những thay đổi bạn nhìn thấy được.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Đặt ngôn ngữ cho trang

Đặt thuộc tính lang trên phần tử <html>, với mã của ngôn ngữ mà trang được viết:

<!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>

Thuộc tính này không làm đoạn văn thay đổi gì về mặt hiển thị, nhưng nó thay đổi cách trang được xử lý: trình đọc màn hình đọc bằng giọng tiếng Anh, trình duyệt dựa vào nó để quyết định có đề xuất dịch hay không, và trình kiểm tra chính tả có thể dùng nó để chọn từ điển tiếng Anh. Không có nó, các công cụ phải đoán, và một trình đọc màn hình đặt ngôn ngữ khác có thể đọc văn bản tiếng Anh với cách phát âm sai.

Mã ngôn ngữ

Giá trị là một thẻ ngôn ngữ theo chuẩn BCP 47. Phần lớn là mã ngôn ngữ hai chữ cái, có thể kèm theo vùng hoặc hệ chữ viết:

Mã	Ngôn ngữ
`en`	Tiếng Anh
`en-US`, `en-GB`	Tiếng Anh dùng ở Mỹ, ở Anh
`es`, `es-MX`	Tiếng Tây Ban Nha, tiếng Tây Ban Nha dùng ở Mexico
`pt-BR`	Tiếng Bồ Đào Nha dùng ở Brazil
`fr`, `de`, `it`	Tiếng Pháp, tiếng Đức, tiếng Ý
`ar`, `he`	Tiếng Ả Rập, tiếng Do Thái (viết từ phải sang trái, xem bên dưới)
`ja`, `ko`	Tiếng Nhật, tiếng Hàn
`zh-Hans`, `zh-Hant`	Tiếng Trung chữ giản thể, phồn thể

Mã không phân biệt chữ hoa chữ thường, nhưng quy ước là mã ngôn ngữ viết thường và mã vùng viết hoa. Chỉ thêm vùng khi biến thể quan trọng; en là một giá trị đầy đủ và chính xác.

Những thay đổi bạn nhìn thấy được

Phần lớn tác dụng của lang là dành cho phần mềm, nhưng có vài thứ hiện ra trên màn hình. Dấu ngoặc kép của phần tử <q> thay đổi theo ngôn ngữ, quy tắc viết hoa cũng vậy:

<!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>

Mỗi hàng có kiểu dấu ngoặc kép riêng. Ở cột cuối, cùng một text-transform: uppercase cho ra "ISTANBUL" trong tiếng Anh và "İSTANBUL" trong tiếng Thổ Nhĩ Kỳ, vì tiếng Thổ Nhĩ Kỳ giữ dấu chấm trên chữ i viết hoa. Đổi lang của hàng tiếng Thổ Nhĩ Kỳ thành en thì dấu chấm biến mất. Việc tự động ngắt từ (hyphens: auto trong CSS) cũng phụ thuộc vào lang: trình duyệt cần biết ngôn ngữ thì mới biết chỗ nào được ngắt từ.

Đánh dấu cụm từ bằng ngôn ngữ khác

lang dùng được trên mọi phần tử, không chỉ <html>. Khi một trang viết bằng ngôn ngữ này trích một cụm từ bằng ngôn ngữ khác, hãy bọc cụm từ đó và gán cho nó mã riêng. CSS có thể nhắm tới từng ngôn ngữ bằng selector :lang():

<!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>

Trình đọc màn hình chuyển sang cách phát âm tiếng Pháp cho "bon appétit" rồi quay lại tiếng Anh sau đó. :lang(fr) cũng khớp với fr-CA và mọi biến thể tiếng Pháp khác, và nó khớp cả những phần tử kế thừa ngôn ngữ từ phần tử cha, điều mà một selector thuộc tính như [lang="fr"] sẽ bỏ sót.

Ngôn ngữ viết từ phải sang trái: dir

Tiếng Ả Rập, tiếng Do Thái, tiếng Ba Tư và tiếng Urdu được viết từ phải sang trái. lang cho biết tên ngôn ngữ; thuộc tính dir đặt hướng viết. Một trang hoàn toàn bằng tiếng Ả Rập dùng cả hai trên <html>:

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

Với một cụm từ ngắn viết từ phải sang trái nằm trong trang viết từ trái sang phải, hãy đặt cả hai trên phần tử bao quanh nó:

<!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>

Blockquote được căn về phía bên phải và thanh màu xanh lá cũng chuyển sang bên phải, vì border-inline-start đi theo hướng viết. Dùng các thuộc tính logic như margin-inline-start thay cho margin-left giúp bố cục đúng ở cả hai hướng.

lang và hreflang

lang mô tả nội dung của một phần tử. hreflang đặt trên một liên kết và mô tả trang mà nó trỏ tới. Các trang web có bản dịch liệt kê mọi phiên bản trong <head> để công cụ tìm kiếm đưa từng người đọc đến đúng phiên bản:

<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/">

Mỗi trang bản dịch vẫn tự đặt lang riêng trên <html>: lang="de" cho trang tiếng Đức.

Lỗi thường gặp

Bỏ quên lang. Nhiều template quên nó; hãy đặt nó ngay cạnh doctype trên mọi trang.
Chép lang="en" sang các trang bản dịch. Một trang tiếng Đức bị đánh dấu là tiếng Anh sẽ được đọc với cách phát âm tiếng Anh. Hãy khớp với nội dung.
Dùng mã quốc gia làm mã ngôn ngữ. lang="jp" và lang="gr" không phải tiếng Nhật và tiếng Hy Lạp; mã đúng là ja và el.
Dùng lang để đặt hướng viết. Chỉ lang="ar" không làm văn bản chạy từ phải sang trái. Hãy thêm dir="rtl".
Viết lang="en_US". Dấu phân cách là gạch nối: en-US.

Câu hỏi thường gặp

Thuộc tính lang trong HTML có tác dụng gì?

Nó khai báo ngôn ngữ của nội dung trong phần tử. Trình đọc màn hình dùng nó để chọn đúng giọng đọc và cách phát âm, trình duyệt dùng nó để đề xuất dịch, chọn kiểu dấu ngoặc kép và ngắt từ, và một số trình kiểm tra chính tả dùng nó để chọn từ điển.

Nên ghi gì vào thuộc tính lang của thẻ html?

Một mã ngôn ngữ theo chuẩn BCP 47: en cho tiếng Anh, es cho tiếng Tây Ban Nha, fr cho tiếng Pháp, ja cho tiếng Nhật. Chỉ thêm vùng khi điều đó quan trọng, như en-US, en-GB hoặc pt-BR.

Nên dùng lang="en" hay lang="en-US"?

Cả hai đều hợp lệ. en là đủ cho hầu hết các trang tiếng Anh. Dùng en-US hoặc en-GB khi biến thể theo vùng có ý nghĩa, chẳng hạn với chính tả, ngày tháng hoặc cách phát âm một số từ.

Thuộc tính lang có ảnh hưởng đến SEO không?

Google cho biết họ nhận diện ngôn ngữ từ chính văn bản và không dựa vào thuộc tính lang. Dù vậy vẫn nên đặt cho đúng: các công cụ tìm kiếm khác, công cụ dịch và trình đọc màn hình đều dùng nó. Để liên kết các bản dịch của một trang, hãy dùng liên kết hreflang.

Làm sao đánh dấu một đoạn văn bản bằng ngôn ngữ khác?

Thêm lang vào phần tử bao quanh nó: <span lang="fr">bon appétit</span>. Trình đọc màn hình sẽ đổi cách phát âm cho cụm từ đó, và CSS có thể định dạng nó bằng :lang(fr).

lang và hreflang khác nhau thế nào?

lang cho biết nội dung của một phần tử viết bằng ngôn ngữ nào. hreflang đặt trên một liên kết và cho biết trang được liên kết tới viết bằng ngôn ngữ nào, đây là cách các trang web chỉ cho công cụ tìm kiếm biết các phiên bản ngôn ngữ khác của một trang.

Khái niệm liên quan