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

Halo gan. Di postingan sebelumnya, kita sudah membahas cara memasukkan dan menampilkan karakter khusus di HTML.

Kita review sedikit. Supaya karakter khusus dapat ditampilkan di web browser dan tidak diterjemahkan sebagai sebuah perintah/tag, diperlukan pengganti yang merujuk ke karakter khusus tersebut.

Pengganti karakter khusus disebut sebagai HTML Entity yang dapat berupa angka atau singkatan nama dari karakter khusus. Salah dua karakter khusus yakni kurung buka siku "<" dan kurung tutup siku ">".

Kali ini, kita akan membahas beberapa tag HTML yang digunakan untuk formating teks, seperti tag <abbr>, tag <cite>, tag <dfn>, dan tag <small>.

tutorial html untuk pemula

Tag <abbr> untuk menulis singkatan

Tag <abbr> merupakan singkatan dari Abbreviation. Abbreviatio berarti singkatan. Sesuai dengan namanya, tag ini digunakan untuk teks yang berbentuk singkatan, seperti "HTML", "CSS", atau "PHP".

Penggunaan tag <abbr> disertai dengan atribut title yang berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag <abbr>.

Isi dari atribut title akan muncul dan terlihat, jika kursor mouse diarahkan ke teks yang diapit tag <abbr>,

Tag <abbr> masuk ke dalam jenis tag inline element.

Berikut contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML mudah di AneIqbal</title>
  </head>
  <body>
    <p>
      <abbr title="Hypertext Markup Language">HTML</abbr> adalah bahasa yang harus pertama kali dipelajari dalam membuat sebuah web.
    </p>
  </body>
</html>

Seperti ini hasilnya.

tutorial html untuk pemula

Tag <abbr> tidak akan ditampilkan berbeda oleh web browser. Penggunannya hanya kepada struktur teks HTML.

Tag <cite> untuk membuat sumber referensi

Tag <cite> merupakan singkatan dari Citation. Citation adalah sebutan untuk referensi. Konten web bisa saja didapat dari berbagai sumber, yang kemudian sumber tersebut dicantumkan ke dalam konten tersebut dengan tag <cite>.

Teks yang diapit oleh tag <cite> akan ditampilkan miring atau italic oleh web browser. Tag <cite> ini termasuk ke dalam jenis tag inline element.

Berikut contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML itu mudah dan menyenangkan!</title>
  </head>
  <body>
    <p>Referensi yang saya jadikan sebagai tempat belajar HTML adalah <cite>AneIqbal</cite></p>
  </body>
</html>

Seperti ini jadinya.

tutorial html untuk pemula


Tag <dfn> untuk menandai definisi kata

Tag <dfn> merupakan singkatan dari definition. Tag ini digunakan untuk menandai istilah yang akan definisikan. Teks yang diapit oleh tag ini akan ditampilkan miring atau italic.

Tag <dfn> ini termasuk ke dalam jenis tag inline element.

Berikut contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML itu menyenangkan!</title>
  </head>
  <body>
    <p>
      <dfn>HTML</dfn> adahal bahasa yang digunakan untuk membuat dan menyusun struktur halaman web.
    </p>
  </body>
</html>

Seperti ini jadinya.

tutorial html untuk pemula

Tag <small> untuk membuat ukuran huruf kecil

Tag <small> digunakan untuk membuat ukuran huruf menjadi lebih kecil dibanding teks lainnya. Seharusnya, tag <small> ini berstatus deprecated seperti lawannya, tag <big>.

Namun, tag <small> didefinisikan ulang sebagai Small Imprint pada spesifikasi HTML5. Small Imprint dimaksudkan untuk teks kecil di luar konten seperti copyright atau legal notice.

Tag <small> masuk ke dalam jenis tag inline element. 

Berikut contoh kode HTML-nya.
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar HTML itu menyenangkan!</title>
  </head>
  <body>
    <p>HTML adahal bahasa yang digunakan untuk membuat dan menyusun struktur halaman web.<small>&copy; copyright AneIqbal - 2016</small></p>
  </body>
</html>

Seperti ini jadinya.

tutorial html untuk pemula

Seperti itulah penggunaan tag <abbr>, tag <cite>, tag <dfn>, dan tag <small>. Selanjutnya, kita akan bahas tag-tag yang berstatus deprecated.



0 Komentar untuk "Tutorial Formating Text HTML: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML"