HTML abbr: Menjelaskan Singkatan dan Menggunakan Atribut title

HTML <abbr> mengidentifikasi singkatan atau akronim. Atribut opsionalnya title dapat memberikan istilah lengkap, tetapi penjelasan penting juga harus muncul dalam teks yang terlihat agar pembaca dapat memahaminya tanpa mouse.

Tandai sebuah singkatan dan jelaskan istilah lengkapnya

Ketika sebuah istilah teknis muncul pertama kali, menulis istilah lengkap bersamaan dengan singkatannya membantu pembaca memahaminya. Elemen abbr mengidentifikasi teks sebagai singkatan; elemen ini tidak secara otomatis mencari atau menerjemahkan istilah lengkap. Anda tidak perlu membungkus setiap singkatan yang sudah dikenal oleh audiens Anda dengan elemen ini.

Simpan dokumen berikut sebagai abbreviation.html dan buka di browser. Kalimat pertama menjaga penjelasan tetap terlihat, sementara kalimat kedua menunjukkan atribut title.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Singkatan dan istilah lengkap</title>
</head>
<body>
  <p>Dokumen web menggunakan HyperText Markup Language
    (<abbr>HTML</abbr>) untuk menentukan strukturnya.</p>
  <p>Singkatan lain: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

Kalimat pertama menampilkan istilah lengkap di samping HTML. Tergantung pada browser, WWW di kalimat kedua mungkin memiliki garis bawah titik-titik, dan ketika mengarahkan kursor di atasnya mungkin menampilkan World Wide Web dalam tooltip. Browser menentukan tampilan garis bawah dan tooltip secara default, jadi ini bukan fitur desain yang menjamin hasil visual yang konsisten.

Apa yang harus dimasukkan dalam atribut title?

Atribut title pada abbr bersifat opsional. Jika Anda menggunakannya, sertakan istilah lengkap yang diwakili oleh singkatan tersebut, tanpa teks promosi atau penjelasan yang tidak terkait. Nilai title pada satu elemen abbr tidak secara otomatis berlaku untuk elemen abbr lainnya di artikel yang sama. Jika Anda menghapus title dari contoh, singkatan yang terlihat WWW tetap ada.

Jangan bingungkan atribut title global dengan elemen title di dokumen. Atribut title pada abbr memberikan informasi tambahan tentang singkatan tersebut; elemen title di elemen head dokumen menyediakan judul halaman.

Jangan hanya mengandalkan tooltip

Layar sentuh tidak menyediakan hover mouse, dan akses ke informasi title juga berbeda-beda tergantung navigasi keyboard dan teknologi bantu. Jika penjelasan diperlukan untuk memahami sebuah singkatan, buatlah terlihat di dalam teks, seperti pada kalimat pertama di contoh. Buat konten itu sendiri dapat dibaca daripada mengubah abbr menjadi tab stop atau tombol yang tidak perlu hanya untuk menampilkan tooltip.

Jika penjelasannya panjang, tuliskan di dekat kemunculan pertama atau tautkan ke definisi. Pertimbangkan alur bacaan sebelum mengulangi istilah lengkap dalam atribut title jika paragraf yang sama sudah menjelaskannya. Referensi abbr di MDN membahas ketentuan penggunaan dan aksesibilitas.