Language Attribute

Kita sudah menuliskan lang="id" sejak chapter bahasa-dokumen di Section Struktur Dokumen, dan chapter metadata-bahasa memakainya untuk mesin pencari. Ada pihak ketiga yang membacanya lebih dulu dan lebih sering: pembaca layar. Bagi pengguna yang mendengarkan halaman, atribut lang menentukan suara apa yang melafalkan setiap kata.

Halaman berbahasa Indonesia yang mencampur kutipan Inggris adalah kasus paling umum di situs nyata — artikel kopi membahas istilah roasting, situs kedai menyalin ulasan pelanggan. Tanpa penanda bahasa, seluruh campuran itu dibacakan satu mesin suara, dan hasilnya tidak enak didengar.

lang Memilih Mesin Suara #

Mekanismenya: pembaca layar menyediakan mesin suara (speech synthesis) per bahasa. Atribut lang pada elemen mengaktifkan mesin yang tepat untuk teks di dalamnya. Mesin suara Indonesia melafalkan huruf menurut kaidah Indonesia — itulah kekuatannya sekaligus kelemahannya.

Contoh nyatanya kata Inggris “the” yang dilafalkan mesin suara Indonesia: tiga hurufnya dibaca apa adanya menjadi “teh”. Kata “light roast” terdengar seperti “lig-h-t ro-as-t”. Kalimat Inggris utuh yang dibaca mesin Indonesia menjadi rangkaian bunyi yang nyaris tidak bisa dikenali penggunanya. Penanda lang="en" memanggil mesin suara Inggris untuk bagian itu — kata demi kata dilafalkan dengan kaidah yang benar, lalu mesin kembali ke Indonesia setelahnya.

Menandai Setiap Situasi #

Baris terakhir perlu catatan: nama merek dan identifier tidak punya pelafalan baku, jadi pembaca layar memperlakukannya sebagai teks biasa. Elemen code sudah memadai; menandai “JavaScript” atau “form-control” dengan lang justru membuat pelafalannya semakin tidak terduga.

Contoh Artikel Campuran #

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Memilih Single Origin</title>
</head>
<body>
  <h1>Memilih Single Origin</h1>
  <p>Kedai Kopi Siti mengambil biji arabika dari kebun mitra di Gayo.</p>
  <blockquote lang="en">
    <p>Single origin means the coffee is traceable to one farm.</p>
  </blockquote>
  <p>Rasa buahnya muncul lewat proses <span lang="en">natural process</span> selama dua puluh hari.</p>
</body>
</html>

Mari kita bedah penanda bahasanya:

1. Baris 2 (html lang="id"): bahasa utama dinyatakan sekali di akar dokumen — seluruh teks mewarisinya, mesin suara Indonesia aktif sejak awal.
2. Baris 3-5 (head): title ikut bahasa halaman; tidak ada elemen di sini yang butuh penanda sendiri.
3. Baris 9-11 (blockquote lang="en"): kutipan satu blok penuh — mesin suara berganti Inggris selama kutipan dibacakan, lalu kembali ke Indonesia.
4. Baris 12 (span lang="en"): dua kata di tengah kalimat Indonesia — hanya frasa “natural process” yang berganti mesin; sisanya tetap Indonesia.
5. Baris 8 dan 12 (p tanpa penanda): paragraf Indonesia mewarisi lang="id" dari akar — tidak perlu ditulis ulang.

Contoh di atas memang tidak bisa dibuktikan lewat demo render: efek lang tidak tampak di layar sama sekali — ia hidup di mesin suara pembaca layar yang melafalkan teks, dan iframe demo tidak menunjukkannya. Uji langsung pada berkas milikmu: jalankan NVDA atau VoiceOver pada contoh di atas, lalu pasang dan lepas lang="en" pada blockquote sambil mendengarkan pelafalan kutipannya berubah.

Ringkasan #

• lang mengaktifkan mesin suara pembaca layar yang tepat untuk teks di dalamnya.
• Bahasa utama dinyatakan sekali di html; bagian asing ditandai lang pada blok atau span.
• Nama produk dan identifier tidak perlu penanda bahasa.
• Penanda bahasa yang salah membuat seluruh halaman salah pelafalan.

Kata-kata yang dilafalkan dengan benar kini bergerak ke media bersuara: video dan audio yang membutuhkan teks pendampingnya.