HTML q tag | belajar <q> (quote) element

HTML Fadlullah Fadul December 3, 2018

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.

Value: URL

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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>
SHARE
Previous Article Next Article