Elemen HTML q: Kutipan Singkat, Sumber cite, dan Tanda Kutip

Elemen HTML q menandai kutipan pendek dalam sebuah kalimat. Browser biasanya menambahkan tanda kutip secara otomatis, dan atribut cite dapat mencatat URL sumber. Atribut itu tidak membuat tautan sumber yang bisa diklik, jadi sediakan tautan terpisah dalam teks jika pembaca membutuhkannya.

Perbedaan q, blockquote, dan cite

Gunakan q saat mengutip kata-kata dari sumber lain dalam alur kalimat. Untuk kutipan terpisah yang berisi beberapa paragraf, gunakan sebuah kutipan blok dengan blockquote. Jangan gunakan q hanya untuk menyoroti kata atau menambahkan tanda kutip ironi.

Contoh lengkap dengan sumber dan kutipan bersarang

Simpan kode lengkap di bawah ini sebagai inline-quote.html dan buka di browser. Kutipan pertama adalah frasa pendek dari Standar HTML. Kutipan kedua adalah dialog fiktif yang ditulis untuk menunjukkan tanda kutipan bersarang. Tidak diperlukan server atau JavaScript.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q dan sumber kutipan</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Kutipan singkat dan sumber</h1>
  <p>Standar HTML menjelaskan konten yang diwakili q sebagai <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Sumber: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element" target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Dialog fiktif: Siswa berkata, <q>Pemberitahuan itu berbunyi <q>Harap tutup pintu</q></q>.</p></body>
</html>

Kutipan pertama tetap berada dalam paragraf yang sama dengan penjelasan di sekitarnya dan dibatasi oleh tanda kutip. Dalam dialog fiktif, tanda kutip ganda mengelilingi kutipan luar dan tanda kutip tunggal mengelilingi kutipan dalam. Judul sumber yang tertaut muncul di paragrafnya sendiri; alamat dalam atribut cite q tidak ditampilkan secara otomatis.

Hindari menambahkan tanda kutip duplikat

Jika Anda mengetik tanda kutip segera sebelum, sesudah, atau di dalam q untuk mengelilingi kutipan yang sama, tanda baca yang dihasilkan oleh browser dapat berulang. Contohnya hanya meletakkan kata-kata yang dikutip di dalam q dan membiarkan tanda kutip ditangani oleh browser. Anda juga dapat menulis tanda kutip secara manual dalam teks biasa tanpa q, tetapi jangan menggabungkan kedua set tanda kutip untuk kutipan yang sama.

Tanda bawaan dapat bervariasi tergantung pada bahasa dokumen atau elemen dan gaya browser. Aturan CSS quotes dalam contoh secara eksplisit menetapkan pasangan luar dan dalam sehingga Anda dapat membandingkan hasilnya dengan jelas. Hapus aturan itu untuk membandingkan nilai default, kemudian kembalikan. Mengubah tampilan tidak menghilangkan makna elemen q sebagai kutipan.

Buat sumber tersedia bagi pembaca

Atribut cite bersifat opsional. Gunakan alamat yang menyediakan kutipan asli atau konteksnya, bukan halaman rumah yang tidak terkait. Jika pembaca perlu membaca sumber aslinya, sertakan juga elemen a dengan teks tautan spesifik, seperti pada contoh. Salin kata-kata yang telah diverifikasi dengan akurat dan bedakan kutipan dari penjelasan Anda sendiri.

Jangan menganggap bahwa setiap pembaca layar mengumumkan awal dan akhir kutipan q dengan cara yang sama. Jika atribusi penting, jelaskan siapa yang mengatakan apa dalam kalimat itu sendiri, misalnya, “Standar menjelaskan …”. Untuk definisi dan ketentuan penggunaan, lihat definisi q dalam Standar HTML dan referensi q di MDN.