Saturday, September 20, 2014

Tag abbr HTML

Abbr singkatan dari Abbreviation dalam bahasa Indonesi menyingkat. Setelah disingkat kemudian diberikan penjelasan melalui tooltip - ketika kursor diarahkan kepada kata yang disingkat. Penulisannya; <abbr atribut>kata</abbr>. Contoh ini memakai atribut title.

abbr.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag abbr</title>
        </head>
    <body>
    Nama saya Erwin Sholeh <abbr title="Siregar">SRG</abbr>. Ibu saya marganya <abbr title="Harahap">HRP</abbr>
    </body>
    </html>


Tampilan di browser Firefox:


Firefox memberikan style dengan tanda titik-titik (....), namun jika dilihat di Internet Explorer 11, maka tampilannya beda, hanya menampilkan seperti teks biasa:


Untuk mengatasinya, tambahkan css abbr. Caranya ubah jenis font atau warna background:

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Tag abbr</title>
            <style type="text/css">
            abbr{background-color:#FAFAFA;
            font-family:Georgia,Verdana;
            font-size:14px;}
            </style>

        </head>
    <body>
    Nama saya Erwin Sholeh <abbr title="Siregar">SRG</abbr>. Ibu saya marganya <abbr title="Harahap">HRP</abbr>
    </body>
    </html>


Hasilnya di IE:


Penambahan warna ini diharapkan membuat yang melihatnya menjadi penasaran dan akan mengarahkan kursor di atasnya.

^Baca juga: Tag <address> HTML5.

Referensi tulisan:
  1. <abbr>; ditulis oleh: Tim MDN (Mozilla Developer Network), developer.mozilla.org, diakses 20 September 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

No comments:

Post a Comment