Referensi Belajar HTML q tag. Tutorial dan panduan mengenai element <q>...</q> yang digunakan untuk mengutip teks/konten dari sumber lain. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <q>.


Deskripsi
Penjelasan HTML q (quote)

q menunjukkan sebuah quote yang dapat diartikan dengan kutipan.

HTML <q> element digunakan untuk merepresentasikan beberapa kutipan (konten frase) yang diambil dari sumber lain.

Tanda kutip (Quotation marks) tidak harus ditulis secara langsung di dalam element <q>, karena biasanya browser menambahkan style tanda kutip tersebut secara default.

Penggunaaan attribute cite didalam element <q> mungkin diperlukan ketika merujukkan sumber dari kutipan tersebut (untuk mereferensikan alamat URL dari konten/teks yang dikutip).

<q> element digunakan untuk kutipan pendek yang terletak didalam baris (inline), sedangkan untuk blok kutipan panjang menggunakan <blockquote> element.

Attributes
Atribut HTML Tag <q>

cite

Menentukkan sumber URL dari sebuah kutipan.


Global Attributes
Atribut Secara Global (Keseluruhan)

<q> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<q> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <q> element

Contoh 1
HTML
<p>Ibu guru mengatakan, <q>Tidak ada kata tua untuk belajar</q>. Saya setuju dengannya.</p>

Contoh 2

Contoh HTML <q> element dengan attribute cite.

HTML
Andrie Wongso mengatakan, <q cite="http://www.andriewongso.com/qotd/details/?id=145">Lompatanku memang tidak jauh... TAPI, Aku tidak pernah melangkah mundur!!!
</q>

Contoh 3

Contoh HTML <q> element dengan attribute cite dan element <cite> secara terpisah.

HTML
<p>Menurut Palang Merah Indonesia (PMI) di halaman <cite>Visi dan Misi</cite> menyebutkan, visi dari PMI adalah <q cite="http://www.pmi.or.id/index.php/tentang-kami/misi-dan-visi.html">PMI yang berkarakter, profesional, mandiri dan dicintai masyarakat</q>. Saya setuju.</p>

Contoh 4

Contoh HTML <q> element di dalam <q> element.

HTML
Dia bertanya, <q>Apa yang kamu katakan, jika Yudi bilang <q>Aku cinta kamu</q></q>

Contoh 5

Contoh menggunakan tanda petik manual, sebagai pengganti <q> element.

HTML
Anton menjadikan Imam 'jembatan' untuk meraih popularitas.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo HTML q tag</title>
  </head>
  <body>
    <h3>Contoh 1</h3>
    <p>Ibu guru mengatakan, <q>Tidak ada kata tua untuk belajar</q>. Saya setuju dengannya.</p>
    <hr>
    <h3>Contoh 2</h3>
    Andrie Wongso mengatakan, <q cite="http://www.andriewongso.com/qotd/details/?id=145">Lompatanku memang tidak jauh... TAPI, Aku tidak pernah melangkah mundur!!!</q>
    <hr>
    <h3>Contoh 3</h3>
    <p>Menurut Palang Merah Indonesia (PMI) di halaman <cite>Visi dan Misi</cite> menyebutkan, visi dari PMI adalah <q cite="http://www.pmi.or.id/index.php/tentang-kami/misi-dan-visi.html">PMI yang berkarakter, profesional, mandiri dan dicintai masyarakat</q>. Saya setuju.</p>
    <hr>
    <h3>Contoh 4</h3>
    Dia bertanya, <q>Apa yang kamu katakan, jika Yudi bilang <q>Aku cinta kamu</q></q>
    <hr>
    <h3>Contoh 5</h3>
    Anton menjadikan Imam 'jembatan' untuk meraih popularitas.
  </body>
</html>