Atribut lang dan Pembaca Layar
Nyatakan bahasa halaman dan elemen untuk pelafalan yang benar.
Atribut lang dan Pembaca Layar adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Fungsi Atribut lang
Atribut lang menyatakan bahasa konten suatu elemen menggunakan tag bahasa BCP-47. Pembaca layar menggunakannya untuk memilih mesin pelafalan dan suara yang tepat, sedangkan mesin pencari menggunakannya untuk mengindeks berdasarkan bahasa.
Menetapkan pada Elemen HTML
Setiap halaman harus menyatakan bahasa utamanya pada elemen akar: <html lang="en"> untuk bahasa Inggris, <html lang="tr"> untuk bahasa Turki, dan <html lang="ja"> untuk bahasa Jepang. Tanpanya, pembaca layar menggunakan bahasa bawaan sistem pengguna, yang sering kali menyebabkan setiap kata dilafalkan secara keliru.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Tag BCP-47
Tag mengikuti BCP-47: kode bahasa (en, tr, ja), secara opsional wilayah (en-US, en-GB, zh-Hant, zh-Hans), dan jarang sekali skrip. Gunakan tag paling spesifik yang akurat; "en" saja sudah cukup jika ejaan regional tidak penting.
Perubahan Bahasa di Tengah Halaman
Untuk bagian dalam bahasa yang berbeda, tandai bagian tersebut dengan atribut lang-nya sendiri: <blockquote lang="fr">Bonjour</blockquote>. Pembaca layar akan mengganti suara untuk bagian tersebut, sehingga pelafalannya akurat bahkan pada halaman multibahasa.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Pemilih Bahasa CSS
CSS dapat menargetkan bahasa melalui :lang(en): blockquote:lang(fr)::before { content: "« "; }. Pemilih ini mencocokkan atribut lang leluhur terdekat. Gunakan cara ini untuk konvensi tipografi, seperti tanda kutip dan spasi, yang berbeda menurut bahasa.
Mengapa Penting untuk Pelafalan
"Live" dalam bahasa Inggris dan bahasa Prancis memiliki pelafalan yang berbeda. "Wir" dalam bahasa Jerman dilafalkan "veer", bukan "wear". Pembaca layar yang dikonfigurasi untuk bahasa Inggris akan salah melafalkan keduanya kecuali diberi tahu bahwa bagian di sekitarnya menggunakan bahasa Jerman atau Prancis.
hreflang untuk Bahasa Tertaut
Atribut hreflang pada tautan (<a href="/fr/" hreflang="fr">Français</a>) memberi tahu mesin pencari dan teknologi asistif bahasa halaman yang dituju. Gabungkan dengan tag tautan hreflang di seluruh situs untuk cakupan SEO internasional yang lengkap.
Mendeteksi Bahasa Pengguna
JavaScript dapat membaca bahasa pilihan pengguna dari navigator.languages (larik tag BCP-47 dalam urutan prioritas). Gunakan informasi ini untuk memilih lokal bawaan atau menyarankan penggantian bahasa — tetapi selalu dahulukan pilihan eksplisit pengguna daripada bawaan peramban.
Deteksi di Sisi Server
Header permintaan HTTP Accept-Language mencantumkan preferensi bahasa pengguna dari konfigurasi peramban. Gunakan header ini di server untuk mengirim HTML terlokalisasi yang tepat pada permintaan pertama, sehingga pengguna melihat bahasanya sebelum JavaScript apa pun dijalankan.
Beberapa Bahasa dalam Satu Halaman
Artikel Wikipedia, aplikasi pembelajaran bahasa, dan kamus secara rutin mencampurkan bahasa. Tandai setiap bagian dengan atribut lang-nya sendiri, bahkan bagian yang pendek. Tanpa lang pada setiap bagian, suara pembaca layar dan tanda kutip CSS akan kembali ke bawaan halaman.
Kesalahan Umum
Tidak adanya lang pada <html> (sangat umum), kode bahasa yang salah (lang="english" alih-alih lang="en"), atau penggunaan kode wilayah ketika bahasa saja sudah cukup. Gunakan validator W3C dan audit aksesibilitas Lighthouse untuk mendeteksi masalah ini dalam CI.
Pemeriksaan Pengetahuan
Mengapa atribut lang pada sangat penting bagi pengguna pembaca layar?
Ringkasan
Nyatakan bahasa halaman pada <html> menggunakan tag BCP-47 (en, tr, ja, zh-Hant). Tandai perubahan bahasa di tengah halaman dengan atribut lang pada span/section agar pembaca layar mengganti suara. CSS :lang() dapat menerapkan tipografi khusus bahasa. Selalu tetapkan lang — tidak memerlukan biaya apa pun dan sangat meningkatkan pelafalan pembaca layar, SEO, serta penargetan CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Atribut lang dan Pembaca Layar” gratis?
Ya — teks lengkap “Atribut lang dan Pembaca Layar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Atribut lang dan Pembaca Layar”?
Nyatakan bahasa halaman dan elemen untuk pelafalan yang benar. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Atribut lang dan Pembaca Layar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Atribut lang dan Pembaca Layar
- dir=rtl untuk Teks dari Kanan ke Kiri
- Elemen bdi dan bdo
- charset dan Penanganan Unicode Karakter Khusus