Dokumentasi HTML interaktif: Atribut lang

Q: Apa yang harus ditulis di atribut lang pada html?

Kode bahasa dari standar BCP 47: en untuk bahasa Inggris, es untuk bahasa Spanyol, fr untuk bahasa Prancis, ja untuk bahasa Jepang. Tambahkan region hanya saat itu penting, seperti di en-US, en-GB atau pt-BR.

Q: Sebaiknya pakai lang="en" atau lang="en-US"?

Keduanya valid. en sudah cukup untuk kebanyakan halaman berbahasa Inggris. Pakai en-US atau en-GB saat variasi regionalnya penting, misalnya untuk ejaan, tanggal, atau pelafalan beberapa kata.

Q: Bagaimana cara menandai teks dalam bahasa lain?

Tambahkan lang ke elemen di sekelilingnya: bon appétit . Screen reader mengganti pelafalan untuk frasa itu, dan CSS bisa memberinya gaya dengan :lang(fr).

Q: Apa perbedaan lang dan hreflang?

lang menyatakan bahasa konten sebuah elemen. hreflang ditaruh di link dan menyatakan bahasa halaman yang dituju, begitulah cara situs mengarahkan mesin pencari ke versi bahasa lain dari sebuah halaman.

Atribut lang HTML: Kode Bahasa dan Apa yang Diubahnya

Atribut lang memberi tahu browser, screen reader, dan alat terjemahan bahasa apa yang dipakai kontenmu. Pelajari di mana menaruhnya, kode apa yang dipakai (en, en-US, pt-BR), cara menandai frasa dalam bahasa lain, dan hal-hal terlihat yang diubahnya.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Mengatur bahasa halaman

Taruh atribut lang di elemen <html>, dengan kode bahasa yang dipakai untuk menulis halamanmu:

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

Atribut ini tidak mengubah tampilan paragraf ini, tapi mengubah cara halaman ditangani: screen reader membacanya dengan suara berbahasa Inggris, browser memakainya saat memutuskan apakah perlu menawarkan terjemahan, dan pemeriksa ejaan bisa memakainya untuk memilih kamus bahasa Inggris. Tanpa atribut ini, alat-alat itu harus menebak, dan screen reader yang diatur ke bahasa lain bisa membaca teks berbahasa Inggris dengan pelafalan yang salah.

Kode bahasa

Nilainya adalah tag bahasa dari standar BCP 47. Kebanyakan berupa kode bahasa dua huruf, yang boleh diikuti region atau aksara:

Kode	Bahasa
`en`	Bahasa Inggris
`en-US`, `en-GB`	Bahasa Inggris yang dipakai di Amerika Serikat, di Inggris
`es`, `es-MX`	Bahasa Spanyol, bahasa Spanyol yang dipakai di Meksiko
`pt-BR`	Bahasa Portugis yang dipakai di Brasil
`fr`, `de`, `it`	Bahasa Prancis, Jerman, Italia
`ar`, `he`	Bahasa Arab, Ibrani (dari kanan ke kiri, lihat di bawah)
`ja`, `ko`	Bahasa Jepang, Korea
`zh-Hans`, `zh-Hant`	Bahasa Tionghoa dengan aksara sederhana, tradisional

Kode tidak peka huruf besar kecil, tapi konvensinya adalah huruf kecil untuk bahasa dan huruf besar untuk region. Tambahkan region hanya saat variasinya penting; en adalah nilai yang lengkap dan benar.

Hal-hal yang diubah lang dan bisa kamu lihat

Kebanyakan efek lang adalah untuk perangkat lunak, tapi beberapa terlihat di layar. Tanda kutip dari elemen <q> mengikuti bahasanya, begitu juga aturan huruf besar kecil:

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

Setiap baris mendapat gaya tanda kutipnya sendiri. Di kolom terakhir, text-transform: uppercase yang sama menghasilkan "ISTANBUL" dalam bahasa Inggris dan "İSTANBUL" dalam bahasa Turki, karena bahasa Turki mempertahankan titik pada huruf i kapital. Ubah lang di baris bahasa Turki menjadi en dan titiknya hilang. Pemenggalan kata otomatis (hyphens: auto di CSS) juga bergantung pada lang: browser perlu tahu bahasanya untuk tahu di mana kata boleh dipenggal.

Menandai frasa dalam bahasa lain

lang berfungsi di elemen mana pun, bukan hanya <html>. Saat halaman dalam satu bahasa mengutip frasa dalam bahasa lain, bungkus frasanya dan beri kodenya sendiri. CSS bisa menargetkan bahasa dengan 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>

Screen reader beralih ke pelafalan bahasa Prancis untuk "bon appétit" lalu kembali ke bahasa Inggris setelahnya. :lang(fr) juga cocok dengan fr-CA dan varian bahasa Prancis lainnya, dan cocok dengan elemen yang mewarisi bahasa dari elemen leluhurnya, yang akan terlewat oleh selector atribut seperti [lang="fr"].

Bahasa dari kanan ke kiri: dir

Bahasa Arab, Ibrani, Persia, dan Urdu ditulis dari kanan ke kiri. lang menyebut bahasanya; atribut dir mengatur arahnya. Halaman yang seluruhnya berbahasa Arab memakai keduanya di <html>:

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

Untuk frasa pendek yang ditulis dari kanan ke kiri di dalam halaman yang ditulis dari kiri ke kanan, taruh keduanya di elemen di sekelilingnya:

<!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 rata ke kanan dan garis hijaunya juga pindah ke kanan, karena border-inline-start mengikuti arah teks. Memakai property logis seperti margin-inline-start, bukan margin-left, menjaga layout tetap benar di kedua arah.

lang vs hreflang

lang menjelaskan konten sebuah elemen. hreflang ditaruh di link dan menjelaskan halaman yang ditujunya. Situs yang punya terjemahan mencantumkan setiap versinya di <head> supaya mesin pencari bisa mengarahkan setiap pembaca ke versi yang tepat:

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

Setiap halaman terjemahan tetap mengatur lang-nya sendiri di <html>: lang="de" di halaman berbahasa Jerman.

Kesalahan umum

Tidak menulis lang. Banyak template melupakannya; atur di samping doctype di setiap halaman.
Menyalin lang="en" ke halaman terjemahan. Halaman berbahasa Jerman yang ditandai sebagai bahasa Inggris akan dibaca dengan pelafalan bahasa Inggris. Sesuaikan dengan kontennya.
Memakai kode negara sebagai bahasa. lang="jp" dan lang="gr" bukan bahasa Jepang dan Yunani; kodenya adalah ja dan el.
Memakai lang untuk mengatur arah. lang="ar" saja tidak membuat teks berjalan dari kanan ke kiri. Tambahkan dir="rtl".
Menulis lang="en_US". Pemisahnya adalah tanda hubung: en-US.

Pertanyaan yang sering diajukan

Apa fungsi atribut lang di HTML?

Atribut ini menyatakan bahasa konten sebuah elemen. Screen reader memakainya untuk memilih suara dan pelafalan yang tepat, browser memakainya untuk menawarkan terjemahan, memilih tanda kutip, dan memenggal kata, dan beberapa pemeriksa ejaan memakainya untuk memilih kamus.

Apa yang harus ditulis di atribut lang pada html?

Kode bahasa dari standar BCP 47: en untuk bahasa Inggris, es untuk bahasa Spanyol, fr untuk bahasa Prancis, ja untuk bahasa Jepang. Tambahkan region hanya saat itu penting, seperti di en-US, en-GB atau pt-BR.

Sebaiknya pakai lang="en" atau lang="en-US"?

Keduanya valid. en sudah cukup untuk kebanyakan halaman berbahasa Inggris. Pakai en-US atau en-GB saat variasi regionalnya penting, misalnya untuk ejaan, tanggal, atau pelafalan beberapa kata.

Apakah atribut lang berpengaruh pada SEO?

Google pernah menyatakan bahwa mereka mendeteksi bahasa dari teksnya sendiri dan tidak bergantung pada atribut lang. Tetap atur dengan benar: mesin pencari lain, alat terjemahan, dan screen reader memakainya. Untuk menghubungkan versi terjemahan sebuah halaman, pakai link hreflang.

Bagaimana cara menandai teks dalam bahasa lain?

Tambahkan lang ke elemen di sekelilingnya: <span lang="fr">bon appétit</span>. Screen reader mengganti pelafalan untuk frasa itu, dan CSS bisa memberinya gaya dengan :lang(fr).

Apa perbedaan lang dan hreflang?

lang menyatakan bahasa konten sebuah elemen. hreflang ditaruh di link dan menyatakan bahasa halaman yang dituju, begitulah cara situs mengarahkan mesin pencari ke versi bahasa lain dari sebuah halaman.

Konsep terkait