Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML

Tutorial kali ini khusus dibuat untuk membahas tag-tag Text HTML yang tidak saya masukkan dalam tutorial tersendiri. Tag yang akan kita bahas dalam tutorial ini adalah tag <abbr>, tag <cite>, tag <dfn>, dan tag <small>. Keempat tag ini bisa digunakan untuk membuat struktur dan format Text di dalam HTML.


Tag <abbr> untuk Penulisan Singkatan dalam HTML

Tag <abbr> adalah singkatan dari Abbreviation. Abbreviation berarti singkatan dan sesuai dengan namanya, ditujukan untuk text yang berbentuk singkatan seperti "NASA", "HTML", atau "HTTP". Penggunaan tag ini biasanya juga menyertakan atribut title. Atribut title berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag <abbr>. Isi dari artibut title hanya ditampilkan ketika mouse berada diatas tag <abbr>.

Tag <abbr> termasuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <abbr> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>
<abbr title="Hypertext Markup Language">HTML</abbr> 
adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
hal pertama yang harus dipelajari adalah HTML
</p>

</body>
</html>

Contoh Penulisan tag abbr dalam HTMLHasil dari tag <abbr> tidak akan ditampilkan berbeda di dalam web browser, dan penggunaannya lebih kepada struktur text HTML.

Selain menggunakan tag <abbr>, HTML versi 4.01 memiliki tag <acronym> dengan tampilan dan tujuan yang sama (termasuk atribut title), namun HTML5 menyatakan tag <acronym> deprecated, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masih akan menemukan tag ini terutama dalam website lama.

Tag <cite> untuk Membuat Sumber Referensi

Tag <cite> adalah singkatan dari Citation. Citation adalah sebutan untuk referensi. Di dalam membuat konten web, biasanya referensi ini bisa berupa buku atau alamat dari web lain. Web browser pada umumnya akan menampilkan tag <cite> dengan garis miring atau italic.

Tag <cite> termasuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <cite> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>
HTML adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
hal pertama yang harus dipelajari adalah HTML
</p>
<p>Referensi yang saya gunakan untuk tutorial ini adalah 
<cite>Learning Web Design</cite>,
dan <cite>HTML Ultimate Reference</cite>
</p>

</body>
</html>

Contoh Penulisan tag cite dalam HTML


Tag <dfn> Untuk Menandai Defenisi Kata

Tag <dfn> adalah singkatan dari Definition. Sesuai dengan namanya, tag ini digunakan untuk menandai defenisi dari suatu istilah. Karena istilah akan sering muncul dalam tulisan, biasanya hanya istilah yang muncul pertama kali saja yang diberi tag <dfn>.

Sebagian besar web browser akan menampilkan tag <dfn> dengan huruf miring atau italic. Tag <dfn> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <dfn> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>
HTML adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
hal pertama yang harus dipelajari adalah HTML
</p>
<p>
<dfn>Web Browser</dfn> adalah sebuah software aplikasi 
untuk menerima, menampilkan, dan menerjemahkan informasi 
dari world wide web (wikipedia).
Dan salah satu informasi itu dibuat dalam format HTML.
</p>
</p>
</body>

</html>

Contoh Penulisan tag dfn dalam HTML


Tag <small> untuk Membuat Ukuran Huruf Kecil

Tag <small> digunakan untuk membuat ukuran huruf menjadi lebih kecil dibandingkan text lainnya. tag <small> seharusnya berstatus deprecated seperti saudaranya, tag <big>. Namun tag <small> mendapat defenisi ulang pada spesikasi HTML5, yakni Small Imprint.

Small Imprint dimaksudkan untuk text kecil diluar konten, seperti copyright atau legal notice. Jika anda menginginkan ukuran text yang kecil, namun bukan untuk small imprint, lebih baik menggunakan CSS.

Tag <small> masuk ke dalam tipe tag inline, yang akan mengikuti alur text yang ada.

Berikut adalah contoh cara penulisan dan penggunaan tag <small> di dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>

<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>
HTML adalah dasar dari semua halaman web di internet. 
Jika anda ingin mempelajari cara membuat website,
hal pertama yang harus dipelajari adalah HTML.
<small>Copyright duniailkom.com 2014</small>
<p>
</body>

</html>

Contoh Penulisan tag small dalam HTML

Tag <small> memiliki pasangan tag <big>, namun tag <big> dinyatakan deprecated di dalam HTML5, yang artinya disarankan untuk tidak digunakan, dan kemungkinan tidak akan didukung web browser. Anda mungkin masing menemukan tag ini terutama dalam website lama.

14 Comments

  1. dira89
    27 Oct 14
    • Andre
      31 Oct 14
  2. MSFalif
    21 May 16
    • Andre
      22 May 16
  3. angga73
    12 Jun 16
    • Andre
      13 Jun 16
  4. anton giatmaka
    21 Nov 16
    • Andre
      23 Nov 16
  5. pangestu46
    19 May 17
    • Andre
      21 May 17
      • uyab uyab
        10 Oct 17
  6. Abe al bantani
    14 Aug 18
    • Andre
      15 Aug 18
  7. han
    18 Jul 20

Add Comment