Skip to content
Kuliah Coding

HTML Quotation

HTML Dasar: Elemen Quotation dan Citation

Section titled “HTML Dasar: Elemen Quotation dan Citation”

Apa Itu Quotation dan Citation dalam HTML?

Section titled “Apa Itu Quotation dan Citation dalam HTML?”

HTML menyediakan elemen khusus untuk menampilkan kutipan (quotation) dan sumber referensi (citation). Elemen ini membantu menyusun konten dengan lebih terstruktur dan semantik, terutama untuk artikel, esai, atau konten yang merujuk pada sumber lain.

1. <blockquote> - Kutipan Panjang

Section titled “1. <blockquote> - Kutipan Panjang”

Elemen

digunakan untuk menampilkan kutipan panjang dari sumber lain.

Biasanya, browser akan memberikan indentasi otomatis pada teks di dalamnya.

Contoh:

<blockquote cite="https://id.wikipedia.org/wiki/HTML">
  HTML adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
</blockquote>

Atribut cite (opsional)

Digunakan untuk menunjukkan URL sumber dari kutipan.

2. <q> - Kutipan Pendek

Section titled “2. <q> - Kutipan Pendek”

Elemen <q> digunakan untuk kutipan pendek dalam satu baris, dan browser biasanya akan secara otomatis menambahkan tanda kutip (“ ”).

Contoh:

<p>Tim Berners-Lee berkata: <q>HTML adalah dasar dari web.</q></p>

3. <cite> - Nama Sumber atau Referensi

Section titled “3. <cite> - Nama Sumber atau Referensi”

Elemen <cite> digunakan untuk menyebutkan judul buku, film, artikel, situs web, atau nama sumber lainnya.

Teks dalam <cite> biasanya ditampilkan dengan huruf miring (italic) secara default oleh browser.

Contoh:

<p>Saya membaca artikel yang sangat menarik di <cite>Wikipedia</cite>.</p>

Contoh dengan referensi lengkap:

<p>Informasi ini diambil dari <cite><a href="https://developer.mozilla.org">MDN Web Docs</a></cite>.</p>

4. <abbr> - Singkatan

Section titled “4. <abbr> - Singkatan”

Elemen <abbr> digunakan untuk menandai singkatan atau akronim. Saat kursor diarahkan ke atasnya, tooltip akan menampilkan bentuk lengkapnya.

Contoh:

<p><abbr title="HyperText Markup Language">HTML</abbr> adalah bahasa dasar untuk membuat halaman web.</p>

5. <address> - Alamat Kontak

Section titled “5. <address> - Alamat Kontak”

Digunakan untuk menampilkan informasi kontak, biasanya dalam footer.

Contoh:

<address>
  Ditulis oleh Angga.<br>
  Email: angga@example.com<br>
  Lokasi: Yogyakarta, Indonesia
</address>

Tips Penggunaan

Section titled “Tips Penggunaan”
  • Gunakan <blockquote> untuk kutipan panjang, dan <q> untuk kutipan pendek.
  • Tambahkan atribut cite jika mengutip dari sumber eksternal.
  • Gunakan <cite> untuk menyebut judul buku/artikel/situs, bukan untuk nama penulis.
  • Gunakan <abbr> untuk memperjelas singkatan teknis.
  • Gunakan <address> hanya untuk informasi kontak, bukan untuk alamat rumah dalam artikel.

Contoh Lengkap HTML

Section titled “Contoh Lengkap HTML”
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Quotation dan Citation</title>
</head>
<body>


  <h2>Kutipan Panjang</h2>
  <blockquote cite="https://id.wikipedia.org/wiki/HTML">
    HTML adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
  </blockquote>


  <h2>Kutipan Pendek</h2>
  <p>Tim berkata: <q>Belajar HTML itu penting.</q></p>


  <h2>Citation</h2>
  <p>Materi ini diambil dari <cite>MDN Web Docs</cite>.</p>


  <h2>Singkatan</h2>
  <p><abbr title="Cascading Style Sheets">CSS</abbr> digunakan untuk mengatur gaya tampilan halaman web.</p>


  <h2>Alamat Kontak</h2>
  <address>
    Disusun oleh Angga<br>
    Email: angga@example.com<br>
    Website: sekolahcoding.com
  </address>


</body>
</html>

Kesimpulan

Section titled “Kesimpulan”
  • Gunakan <blockquote> untuk kutipan panjang, <q> untuk kutipan pendek.
  • Gunakan <cite> untuk menyebutkan sumber atau referensi.
  • Gunakan <abbr> untuk menandai singkatan agar lebih jelas.
  • Gunakan <address> untuk menampilkan info kontak penulis.