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

42

Yodha.web.id – 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</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>

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


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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</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>


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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</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>


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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
<body>
<h3>Saya sedang belajar HTML di Yodha.web.id</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 Yodha.web.id 2017</small>
<p>
</body>
</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.

Incoming search terms:

  • Pd tag <small> di gunakan utk
  • strukturctext html