- Tutorial Web
- HTML
- HTML abbr tag | belajar <abbr> element
HTML Fadlullah Fadul December 3, 2018
Referensi Belajar HTML abbr tag. Tutorial dan panduan mengenai element <abbr>..</abbr> yang digunakan untuk menjelaskan kepanjangan dari singkatan. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai referensi belajar HTML elemen <abbr>.
Deskripsi
Penjelasan HTML abbr
abbr element menunjukkan sebuah abbreviation (singkatan) atau acronym (akronim), seperti HTML, PMI, MPR, RT, RW dan lain sebagainya yang semuanya menunjukkan singkatan dan memiliki kepanjangan. Element <abbr> digunakan bersamaan dengan atribut title yang menjelaskan kepanjangan dari singkatan tersebut dan tidak boleh berisi keterangan lain.
Kepanjangan yang ditulis pada title attribute dapat dilihat ketika mouse/pointer menyentuh (berada diatas) element abbr tersebut.
Global Attributes
Atribut Secara Global (Keseluruhan)
<abbr> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<abbr> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <abbr> element
Contoh 1
Kepanjangan dari PMI adalah "Palang Merah Indonesia" yang ditulis pada value dari title attribute.
<p>Setiap 3 bulan sekali saya mendonorkan darah ke: <abbr title="Palang Merah Indonesia">PMI</abbr>. </p>
Contoh 2<p> <dfn id="pmi">Palang Merah Indonesia</dfn> (<abbr title="Palang Merah Indonesia">PMI</abbr>) adalah organisasi perhimpunan nasional Indonesia yang bergerak di bidang sosial kemanusiaan. PMI memiliki slogan: <cite>Setetes darah Anda, nyawa bagi sesama</cite> </p>
Contoh Lengkap
Contoh source code lengkap disertai dengan demo hasil output kode (preview).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> </head> <body> <h2>Contoh 1</h2> <p>Setiap 3 bulan sekali saya mendonorkan darah ke <abbr title="Palang Merah Indonesia">PMI</abbr>.</p> <hr /> <h2>Contoh 2</h2> <p><dfn id="pmi">Palang Merah Indonesia</dfn> (<abbr title="Palang Merah Indonesia">PMI</abbr>) adalah organisasi perhimpunan nasional Indonesia yang bergerak di bidang sosial kemanusiaan. PMI memiliki slogan: <cite>Setetes darah Anda, nyawa bagi sesama</cite></p> </body> </html>