Elemen kutipan pada HTML digunakan untuk mengutip teks pada laman
web, dimana ukuran dari teks yang dikutip akan tampil dengan ukuran berbeda dari ukuran normal teks pada laman
web.
Dalam pengembangan situs web, kutipan seringkali digunakan untuk menyoroti teks yang dikutip dari sumber eksternal atau untuk menonjolkan pernyataan tertentu di dalam konten. HTML menyediakan elemen khusus untuk menampilkan kutipan secara jelas dan sesuai dengan jenis kutipan yang digunakan. Berikut ini adalah beberapa elemen kutipan yang sering digunakan pada HTML:
satu, Elemen <q>: Elemen ini digunakan untuk mengatur sekumpulan teks dalam tanda kutip. Elemen
<q> memiliki bagian pembukaan dan bagian penutupan pada penggunaan elemennya. Elemen
<q> digunakan untuk menandai teks yang merupakan kutipan pendek. Ini berguna ketika ingin menyoroti bagian kecil dari teks yang dikutip dari sumber eksternal atau mengidentifikasi frasa pendek sebagai kutipan.
Cara Penggunaan:
<p>Albert Einstein pernah berkata, <q>Einstein's best quotes go here.</q></p>
Pada contoh sebelumnya, digunakan elemen <q> untuk menunjukkan kutipan pendek dari Albert Einstein. Ketika di-render pada browser, teks yang berada di dalam elemen <q> akan ditampilkan dalam gaya yang biasanya diterapkan untuk kutipan pendek.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan -->
<head>
<title>
Quotations
</title>
</head>
<body>
<h3>
Saling melompat
</h3>
<p>
Serigala coklat melompati kucing gendut<br>
</p>
<!--dalam quotes-->
<p>
<q>Serigala coklat melompati kucing gendut</q>
</p>
</body>
</html>
Output:
Saling melompat
Serigala coklat melompati kucing gendut
Serigala coklat melompati kucing gendut
dua, Elemen <blockquote>: Elemen ini juga digunakan untuk kutipan, namun dengan cara yang berbeda. Ketimbang meletakkan teks pada kutipan, elemen ini mengubah letak teks itu sendiri sehingga menjadi bentuk yang unik dari teks yang lainnya. Elemen ini memiliki bagian pembukaan dan bagian penutupan. Ketika memiliki teks yang lebih panjang yang ingin dikutip secara penuh dari sumber eksternal atau menyoroti sebuah paragraf, maka dapat menggunakan elemen <blockquote>.
Cara Penggunaan:
<blockquote>
<p>Contoh paragraf kutipan panjang. Ini adalah teks yang ingin disoroti sebagai kutipan.</p>
</blockquote>
Pada contoh sebelumnya, digunakan elemen <blockquote> untuk menandai paragraf kutipan panjang. Bila di-render, maka teks yang berada di dalam elemen <blockquote> akan ditampilkan dengan indentasi khusus atau gaya tertentu yang membedakannya dari teks lainnya.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan-->
<head>
<title>
Blockquote
</title>
</head>
<body>
<h3>
Saling melompat
</h3>
<p>
Serigala coklat melompat diatas kucing gendut<br>
</p>
<!--Dalam blockquotes-->
<p>
<blockquote>
Serigala coklat melompat
di atas kucing gendut</blockquote>
</p>
</body>
</html>
Output:
Saling melompat
Serigala coklat melompat diatas kucing gendut
Serigala coklat melompat di atas kucing gendut
Catatan: Menggunakan elemen
<q> dan
<blockquote> dalam HTML memungkinkan untuk menambahkan kutipan dengan jelas dan sesuai dengan jenis kutipan yang ingin ditunjukkan pada halaman
web. Perlu diingat, penampilan dari kutipan ini dapat diubah atau didefinisikan lebih lanjut melalui CSS untuk menyesuaikan tampilannya dengan desain situs
web yang dibuat.
Baca Juga:
tiga, Elemen <address>: Merupakan elemen yang digunakan untuk mendefinisikan alamat pada sebuah laman web, denga teks yang berada di dalam alamat tersebut akan menjadi emphasize. Elemen ini memiliki bagian pembukaan dan bagian penutupan.
Elemen HTML <address> digunakan untuk menandai informasi kontak atau alamat dalam sebuah dokumen HTML. Biasanya, elemen ini digunakan di dalam elemen <footer> untuk menyediakan informasi kontak yang berkaitan dengan pemilik halaman web atau pembuat konten.
Berikut adalah contoh penggunaan dari elemen <address>:
<footer>
<address>
Informasi kontak:
<a href="mailto:info@example.com">info@example.com</a><br>
123 Jalan Contoh, Kota, Negara
</address>
</footer>
Dalam contoh sebelumnya, elemen <address> digunakan untuk menunjukkan informasi kontak seperti alamat email dan alamat fisik. Elemen <a> juga digunakan di dalam elemen <address> untuk menyediakan tautan email dengan menggunakan atribut href="mailto:info@example.com".
Catatan: Penting untuk dicatat bahwa penggunaan elemen <address> bukan hanya terbatas pada informasi kontak, tapi penggunaannya bisa disesuaikan sesuai dengan kebutuhan, dan umumnya digunakan untuk menyediakan informasi kontak atau alamat yang berkaitan dengan pemilik halaman web atau organisasi yang berkaitan. Perlu diingat pula bahwa penampilan dari elemen <address> dapat diubah melalui CSS untuk menyesuaikan gaya dan tata letaknya sesuai dengan desain halaman web yang dibuat.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan -->
<head>
<title>
Address
</title>
</head>
<body>
<h3>
Alamat rumah
</h3>
<address>
<p>
Alamat:<br>
710-B, Advant Navis Business Park,<br>
Sector-142, Noida Uttar Pradesh – 201305
</p>
</address>
</body>
</html>
Output:
Alamat rumah
Alamat:
710-B, Advant Navis Business Park,
Sector-142, Noida Uttar Pradesh – 201305
empat, Elemen <abbr>: Merupakan elemen yang digunakan untuk mendefinisikan teks sebagai akronim atau singkatan. Atribut
title atau judul juga dapat digunakan untuk menampilkan versi penuh dari akronim, ketika
mouse diarahkan menuju ke elemen
<abbr>. Elemen ini memiliki bagian pembukaan dan bagian penutupan. Penggunaan elemen ini sangat berguna pada
browser dan mesin pencari.
Pada dasarnya elemen HTML
<abbr> digunakan untuk menandai singkatan atau akronim dalam sebuah dokumen HTML. Singkatan atau akronim yang ditandai dengan elemen <abbr> tersebut akan membantu mesin pencari atau pembaca layar memahami bahwa teks tersebut merupakan sebuah singkatan atau akronim.
Berikut adalah contoh penggunaan dari elemen <abbr>:
<p><abbr title="World Health Organization">WHO</abbr> adalah organisasi yang berfokus pada kesehatan global.</p>
Dalam contoh sebelumnya, elemen <abbr> digunakan untuk menunjukkan singkatan "WHO" yang merupakan kependekan dari "World Health Organization", dimana atribut title pada elemen <abbr> memberikan penjelasan tambahan tentang apa yang diwakili oleh singkatan tersebut. Ketika pengguna mengarahkan kursor ke atas teks yang ditandai sebagai <abbr>, maka akan muncul informasi tambahan dalam bentuk tooltip yang menampilkan isi dari atribut title.
Catatan: Elemen <abbr> sangat membantu dalam meningkatkan aksesibilitas dan pemahaman konten bagi pengguna, terutama bagi yang menggunakan teknologi pembantu atau pembaca layar. Elemen ini sangat membantu dalam memberikan informasi tambahan mengenai singkatan atau akronim yang mungkin tidak jelas secara langsung dari konteks teks.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan -->
<head>
<title>
Abbreviations
</title>
</head>
<body>
<h3>
Selamat datang
</h3>
<!--Akronim dari teks-->
<p>
Selamat datang di <abbr title="Rumah Makan Padang">RMP</abbr>
</p>
</body>
</html>
Output:
Selamat datang
Selamat datang di RMP
lima, Elemen <bdo>: Elemen HTML <bdo> singkatan dari "
Bi-Directional Override", digunakan untuk mengontrol atau mengatur arah penulisan teks di dalam dokumen HTML. Elemen ini berguna ketika ingin dilakukan perubahan arah baca tulisan dari kiri ke kanan atau sebaliknya untuk teks yang berbeda arah penulisannya. Elemen
<bdo> merupakan elemen yang digunakan untuk mendefinisikan bidireksional dari teks atau dengan kata lain teks yang ditulis dari kiri ke kanan akan ditulis sebaliknya. Elemen ini memiliki bagian pembukaan dan penutupan.
Contoh penggunaan dari elemen <bdo>:
<p><bdo dir="rtl">Teks dari kanan ke kiri.</bdo></p>
Dalam contoh sebelumnya, atribut dir="rtl" pada elemen <bdo> menandakan bahwa teks di dalam elemen tersebut akan ditampilkan dari kanan ke kiri (Right-To-Left). Penggunaan umum dari elemen <bdo> terutama sangat berguna dalam konteks dimana user memiliki teks dengan arah penulisan yang berlawanan dengan arah umumnya, seperti teks Arab atau Ibrani yang biasanya ditulis dari kanan ke kiri, yang berbeda dengan bahasa Inggris yang umumnya ditulis dari kiri ke kanan.
Catatan: Perlu diingat bahwa penggunaan elemen <bdo> haruslah dipertimbangkan dengan hati-hati, karena bisa memengaruhi cara teks ditampilkan dan dibaca oleh pengguna. Hal ini terutama penting dalam konteks internasionalisasi dan lokal dari situs web yang dikembangkan.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan -->
<head>
<title>
Bidirectional
</title>
</head>
<body>
<h3>
Selamat datang
</h3>
<!--Teks dalam format normal-->
<p>
Serigala coklat melompat di atas kucing gendut<br>
</p>
<!--Inside <bdo> tag-->
<p>
<bdo dir="rtl">Serigala coklat melompat
di atas kucing gendut</bdo>
</p>
</body>
</html>
Output:
Selamat datang
Serigala coklat melompat di atas kucing gendut
Serigala coklat melompat di atas kucing gendut
enam, Elemen <cite>: Elemen HTML
<cite> digunakan untuk menandai kutipan atau referensi dalam sebuah dokumen HTML. Elemen
<cite> yang biasanya digunakan untuk merujuk kepada sumber atau karya tertentu, seperti buku, artikel, film, situs
web, atau karya lainnya. Elemen ini digunakan untuk mendefinisikan sebuah judul dari sebuah pekerjaan dan melakukan
emphasize dari teks tersebut.
Contoh penggunaan dari elemen <cite>:
<p>Ia merujuk kepada karya <cite>The Great Gatsby</cite> karya F. Scott Fitzgerald.</p>
Dalam contoh sebelumnya, elemen <cite> digunakan untuk menandai judul "The Great Gatsby", yang menunjukkan bahwa teks tersebut adalah sebuah karya yang diacu atau dirujuk. Penggunaan elemen <cite> membantu menandai secara spesifik bagian dari teks mana yang merupakan teks referensi, yang membantu dalam memberikan informasi lebih lanjut kepada pembaca atau mesin pencari tentang sumber yang dirujuk.
Catatan: Penting untuk diingat bahwa penggunaan elemen <cite> secara langsung tidak memberikan gaya atau tampilan tertentu pada teks yang dirujuk. Gaya atau tampilan dari teks yang ditandai dengan <cite> biasanya dapat diatur menggunakan CSS untuk menyesuaikan penampilan dalam desain halaman web.
Contoh:
<!DOCTYPE html>
<html>
<!-- HTML kutipan-->
<head>
<title>
Cite
</title>
</head>
<body>
<h3>
Selamat datang
</h3>
<!--judul berada dalam cite tag-->
<p>
Tim <cite>Merah</cite> adalah kelompok terbaik dalam<br>
lomba makan nasi padang.
</p>
</body>
</html>
Output:
Selamat datang
Tim Merah adalah kelompok terbaik dalam
lomba makan nasi padang.
Apa yang dimaksud dengan kutipan pada HTML?
BalasHapusHTML quotation digunakan untuk membuat sebuah kutipan pada HTML. Tag kutipan pada HTML digunakan untuk mendefinisikan bentuk kutipan dari sebuah kalimat atau kata yang akan ditampilkan pada website HTML.
HapusApa yang dimaksud dengan kutipan secara umum?
BalasHapusKutipan merupakan bentuk kata atau frasa yang diambil dari orang lain atau dari karya sastra atau literatur yang diminta dari sumber tertentu. Contoh, kutipan ketika seseorang mengambil suatu bagian dari karya Shakesspeare dan mengulangi kalimat dari karya tersebut pada karya sendiri atau tulisan sendiri tanpa mengubah satu kata pun dari karyanya.
HapusApa yang dimaksud dengan tag kutipan HTML?
BalasHapusTag kutipan dalam HTML digunakan untuk menampilkan kutipan dengan menggunakan tag < q > ataupun menggunakan tag kutipan lainnya yang tersedia pada HTML. Tag ini membantu untuk menunjukkan bahwa teks yang terkandung dalam suatu kalimat merupakan saduran dari sumber lain atau berupa kalimat kutipan.
Hapus