HTML Quotations


Bab 1: Pentingnya Sitasi & Referensi

Di dunia akademik maupun profesional, menyalin kata-kata orang lain tanpa menyebutkan sumbernya adalah tindakan plagiarisme. HTML menyediakan serangkaian elemen khusus untuk menangani kutipan (quotations) dan referensi agar mesin pencari tahu bahwa konten tersebut diambil dari sumber lain.

💡 Manfaat SEO:

Menggunakan tag kutipan yang benar membantu Google memahami hubungan antara website Anda dengan website sumber lain, yang dapat meningkatkan kredibilitas konten Anda.

Bab 2: Kutipan Panjang (Blockquote)

Jika Anda ingin mengutip satu paragraf penuh atau lebih dari sumber lain, gunakan tag <blockquote>.

Secara default, browser akan memberikan indentasi (tab menjorok ke dalam) pada elemen ini untuk membedakannya dari teks utama.

Contoh Blockquote:

<p>Berikut adalah filosofi CODIVAY:</p>
<blockquote cite="https://codivay.com/about">
  Pemrograman bukan hanya tentang menulis kode, 
  tetapi tentang memecahkan masalah dan menciptakan 
  solusi yang bermanfaat bagi banyak orang.
</blockquote>

Bab 3: Kutipan Pendek (Q)

Untuk kutipan singkat yang berada di dalam kalimat (inline), gunakan tag <q>. Browser modern akan otomatis menambahkan tanda kutip ganda (") di sekitar teks tersebut.

<p>Albert Einstein pernah berkata: <q>Imajinasi lebih penting daripada pengetahuan.</q></p>

Bab 4: Singkatan (Abbreviation)

Tag <abbr> digunakan untuk mendefinisikan singkatan atau akronim. Ini sangat berguna untuk aksesibilitas dan SEO.

Gunakan atribut title untuk menyimpan kepanjangan dari singkatan tersebut. Saat pengguna mengarahkan mouse (hover) ke teks, kepanjangannya akan muncul sebagai tooltip.

<p>Saya belajar <abbr title="Hypertext Markup Language">HTML</abbr> di CODIVAY.</p>

Bab 5: Informasi Kontak (Address)

Tag <address> digunakan khusus untuk mendefinisikan informasi kontak penulis atau pemilik artikel. Isi di dalamnya biasanya berupa alamat fisik, email, link media sosial, atau nomor telepon.

Secara visual, browser biasanya menampilkan isi tag ini dengan format miring (italic).

<address>
  Ditulis oleh: <a href="mailto:admin@codivay.com">Admin V</a>.<br>
  Kunjungi kami di:<br>
  Gedung Teknologi Cyber,<br>
  Jakarta, Indonesia.
</address>

Bab 6: Judul Karya (Cite)

Tag <cite> digunakan untuk menandai judul sebuah karya kreatif, seperti buku, film, lukisan, atau lagu. Ingat: gunakan ini untuk Judul Karya, bukan nama orangnya.

<p>Lukisan <cite>Monalisa</cite> karya Da Vinci sangat terkenal.</p>

Bab 7: Arah Teks (Bi-Directional Override)

Tag <bdo> digunakan untuk membalik arah teks. Ini jarang digunakan dalam konten standar, tapi berguna jika Anda bekerja dengan bahasa yang ditulis dari kanan-ke-kiri (seperti Arab atau Ibrani) di tengah teks Latin.

Atribut dir="rtl" (Right to Left) akan membalik urutan huruf.

<p>Teks normal: Kasur ini rusak.</p>
<p>Teks dibalik: <bdo dir="rtl">Kasur ini rusak</bdo></p>

⚡ Proyek Kilat: Halaman "Hall of Fame"

Misi Anda adalah membuat daftar kutipan tokoh terkenal dengan format yang benar. Gunakan tag yang sesuai untuk setiap elemennya.

🎯 Target Misi:

  • ✅ Gunakan <blockquote> untuk kutipan: "Stay hungry, stay foolish."
  • ✅ Di bawahnya, tulis nama tokoh "Steve Jobs" dan judul karyanya "Biografi Apple" menggunakan tag <cite>.
  • ✅ Tambahkan singkatan <abbr> untuk kata "CEO" (Chief Executive Officer) di deskripsi tokoh.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Langkah Selanjutnya

Anda sudah belajar banyak tag HTML! Namun, kode Anda mungkin mulai terlihat berantakan. Di bab selanjutnya, kita akan belajar cara menulis Komentar (Comments) untuk memberikan catatan pada kode tanpa menampilkannya di browser.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke HTML Comments »