HTML Quotation adalah sebuah tag HTML yang digunakan untuk menandai kutipan atau petikan dalam dokumen HTML. Quotation tag HTML memiliki beberapa jenis seperti <blockquote>, <q>, dan <cite>. Pada artikel ini, akan dibahas secara lengkap tentang penggunaan, fungsi, serta contoh penggunaan masing-masing tag HTML quotation.
<blockquote>
Tag HTML <blockquote> digunakan untuk menampilkan kutipan atau teks yang dikutip secara langsung dari sumber yang lain. Biasanya, tag ini digunakan untuk menunjukkan sebuah kutipan panjang yang berasal dari sebuah teks atau dokumen tertentu. Contoh penggunaannya seperti berikut:
1 2 3 4 | <blockquote> <p>Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.</p> <cite>Nelson Mandela</cite> </blockquote> |
Pada contoh di atas, tag <blockquote> digunakan untuk menampilkan kutipan Nelson Mandela yang panjang. Teks kutipan tersebut dikemas dalam sebuah paragraf (<p>) dan diakhiri dengan tag <cite> yang menunjukkan siapa yang mengucapkan kutipan tersebut.
<q>
Tag HTML <q> (atau singkatan dari "quote") digunakan untuk menandai kutipan pendek atau singkat dalam dokumen HTML. Contoh penggunaannya seperti berikut:
1 | <p>The famous phrase, <q>to be or not to be</q>, was written by William Shakespeare.</p> |
Pada contoh di atas, tag <q> digunakan untuk menandai kutipan pendek dari salah satu dialog dalam karya Shakespeare, "Hamlet".
<cite>
Tag HTML <cite> digunakan untuk menandai judul dari sebuah karya seperti buku, artikel, atau film. Contoh penggunaannya seperti berikut:
1 | <p>I recently read <cite>The Great Gatsby</cite> by F. Scott Fitzgerald and was blown away by its beautiful prose.</p> |
Pada contoh di atas, tag <cite> digunakan untuk menandai judul buku yang dibaca oleh penulis artikel.
Kesimpulan
Dalam dokumen HTML, quotation tag sangat berguna untuk menandai kutipan atau teks yang dikutip secara langsung dari sumber yang lain.
Ketiga tag quotation yang telah dibahas di atas, yaitu <blockquote>, <q>, dan <cite>, dapat digunakan untuk menandai kutipan panjang, kutipan pendek, dan judul karya, masing-masing.
Dengan penggunaan tag quotation yang tepat, dokumen HTML akan menjadi lebih mudah dipahami dan terstruktur dengan baik.
Selain itu, tag quotation juga dapat meningkatkan SEO pada dokumen HTML karena mesin pencari seperti Google dapat memperhitungkan tag quotation saat mengindeks dan menampilkan hasil pencarian.
Namun, penting untuk diingat bahwa penggunaan tag quotation harus sesuai dengan tujuannya. Jangan gunakan tag <blockquote> untuk kutipan pendek atau tag <q> untuk kutipan panjang. Selalu gunakan tag yang sesuai dengan jenis kutipan yang ingin ditandai.
Selain itu, penting juga untuk menyertakan atribut yang relevan pada tag quotation. Beberapa atribut yang dapat digunakan pada tag quotation adalah:
- "cite": digunakan pada tag <blockquote> dan <q> untuk menunjukkan sumber kutipan.
- "title": digunakan pada tag <cite> untuk memberikan informasi tambahan tentang karya yang dikutip.
Contoh penggunaan atribut "cite" pada tag <blockquote> dan <q> seperti berikut:
1 2 3 4 5 6 7 | <blockquote cite="https://www.brainyquote.com/quotes/william_shakespeare_106256"> <p>To be, or not to be, that is the question:</p> <p>Whether 'tis nobler in the mind to suffer</p> <cite>William Shakespeare</cite> </blockquote> <p>The famous phrase, <q cite="https://en.wikipedia.org/wiki/To_be,_or_not_to_be">to be or not to be</q>, was written by William Shakespeare.</p> |
Pada contoh di atas, atribut "cite" digunakan untuk menunjukkan sumber kutipan pada tag <blockquote> dan <q>.
Kesimpulannya, tag quotation pada dokumen HTML sangat berguna untuk menandai kutipan atau teks yang dikutip secara langsung dari sumber yang lain.
Dengan penggunaan yang tepat dan penyertaan atribut yang relevan, dokumen HTML akan menjadi lebih terstruktur dan mudah dipahami oleh pengguna serta mesin pencari.
Selain itu, perlu juga diperhatikan tampilan visual dari tag quotation. Secara default, browser akan menampilkan kutipan pada tag <blockquote> dengan indentasi pada sisi kiri dan kanan, serta pada tag <q> dengan tanda kutip ("") pada sisi kiri dan kanan teks.
Namun, tampilan visual ini dapat diubah dengan menggunakan CSS.
Contoh penggunaan CSS untuk mengubah tampilan visual pada tag <blockquote>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <style> blockquote { background-color: #f7f7f7; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; } blockquote p:first-of-type { font-weight: bold; margin-top: 0; } blockquote cite { font-style: normal; } </style> <blockquote> <p>Knowledge is power. Information is liberating. Education is the premise of progress, in every society, in every family.</p> <cite>Nelson Mandela</cite> </blockquote> |
Pada contoh di atas, CSS digunakan untuk memberikan tampilan yang berbeda pada tag <blockquote>.
Tampilan visual tersebut meliputi pengaturan warna latar belakang, ukuran border, margin, dan padding. Selain itu, CSS juga digunakan untuk mengatur tampilan teks pada tag <cite>.
Kesimpulannya, tag quotation pada dokumen HTML tidak hanya berguna untuk menandai kutipan atau teks yang dikutip secara langsung dari sumber yang lain, tetapi juga dapat diatur tampilannya dengan menggunakan CSS.
Dengan menggunakan CSS, tampilan visual pada tag quotation dapat disesuaikan dengan kebutuhan dan gaya tampilan dari website yang dibuat.
0 comments