HTML - Petikan: Menambah Kedalaman dan Kredibiliti kepada Kandungan Web Anda

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan mendalam ke dunia petikan HTML. Seperti guru komputer yang ramah di lingkungan Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Percayalah, pada akhir pelajaran ini, Anda akan dapat membuat petikan seperti Shakespeare dalam HTML! ?

Daftar Tag Petikan HTML

Sebelum kita mulai, mari kita lihat secara cepat semua tag yang berkaitan dengan petikan yang akan kita bahas hari ini:

Tag	Deskripsi
<q>	Untuk petikan dalam baris
<blockquote>	Untuk petikan panjang, tingkat blok
<cite>	Untuk menentukan sumber petikan
<address>	Untuk informasi kontak
<bdo>	Untuk mengubah arah teks
<abbr>	Untuk singkatan atau akronim

Sekarang, mari kita jelajahi setiap tag ini secara detil!

HTML "" untuk Petikan

Tag <q> sangat cocok untuk petikan pendek, dalam baris. Itu seperti pisau multifungsi dalam tag petikan - kecil, tapi sangat berguna!

<p>Sebagai Shakespeare pernah katakan, <q>Ada atau tidak ada, itu adalah pertanyaannya.</q></p>

Ketika dirender di browser, ini akan tampak seperti ini:

Sebagai Shakespeare pernah katakan, "Ada atau tidak ada, itu adalah pertanyaannya."

Perhatikan bagaimana browser secara otomatis menambah tanda petik di sekitar teks dalam tag <q>. Itu seperti memiliki editor kecil, teliti yang bekerja di belakang layar!

HTML "

" untuk Petikan

Apa bila Anda ingin menyingkatan seluruh paragraf? Itu adalah saatnya teman kita <blockquote> dipakai. Itu saudara besar <q>, dirancang untuk petikan panjang.

<blockquote>
<p>Dua jalan berpisah di hutan, dan saya—
Saya memilih jalan yang kurang dikunjungi,
Dan itu membuat semua perbedaan.</p>
</blockquote>

Ini akan dirender sebagai blok teks yang terindentasi, sempurna untuk menyorot petikan yang panjang:

Dua jalan berpisah di hutan, dan saya— Saya memilih jalan yang kurang dikunjungi, Dan itu membuat semua perbedaan.

Tips Profesional: <blockquote> sangat cocok untuk testimonial di situs web. Itu membuat petikan tampak menonjol dan memberikan bobot yang lebih besar!

HTML "" untuk Petikan

Sekarang kita telah menyingkatan seseorang, pasti adil untuk memberikan kredit kepadanya, kan? Itu adalah saatnya tag <cite> dipakai. Itu digunakan untuk merujuk ke sumber petikan.

<blockquote>
<p>Satu-satunya cara untuk melakukan pekerjaan yang bagus adalah mencintai apa yang Anda lakukan.</p>
<cite>Steve Jobs</cite>
</blockquote>

Ini akan menampilkan petikan dengan sumber yang dicantumkan di bawah:

Satu-satunya cara untuk melakukan pekerjaan yang bagus adalah mencintai apa yang Anda lakukan.

— Steve Jobs

Tag <cite> biasanya dirender dalam huruf miring secara default, memberikan penampilan yang berbeda.

HTML "

" untuk Petikan

Meskipun namanya, tag <address> tidak hanya untuk alamat jalan. Itu digunakan untuk jenis informasi kontak apa saja bagi penulis dokumen atau artikel.

<address>
Ditulis oleh John Doe.<br>
Kunjungi kami di:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Ini akan dirender seperti ini:

Ditulis oleh John Doe. Kunjungi kami di: Example.com Box 564, Disneyland USA

Ingat, <address> biasanya ditampilkan dalam huruf miring dan browser akan menambah pemisah baris sebelum dan setelah elemen ini.

HTML "" untuk Petikan

Pernahkah Anda ingin menulis secara terbalik? Tag <bdo> (Override Bi-Direksi) adalah tiket Anda untuk manipulasi arah teks!

<p>Teks ini akan berjalan dari kiri ke kanan.</p>
<p><bdo dir="rtl">Teks ini akan berjalan dari kanan ke kiri.</bdo></p>

Ini akan ditampilkan seperti ini:

Teks ini akan berjalan dari kiri ke kanan.

.tfel ot thgir og lliw txet sihT

Atribut dir dapat diatur ke "ltr" (kiri ke kanan) atau "rtl" (kanan ke kiri). Itu sangat berguna bagi bahasa yang ditulis dari kanan ke kiri, seperti Arab atau Ibrani.

HTML "" untuk Petikan

Terakhir tetapi bukan terkecil, kita memiliki tag <abbr>. Itu digunakan untuk mewakili singkatan atau akronim.

<p>Organisasi Kesehatan Dunia <abbr title="World Health Organization">WHO</abbr> didirikan pada tahun 1948.</p>

Ini akan tampak seperti ini:

Organisasi Kesehatan Dunia WHO didirikan pada tahun 1948.

Tapi ini adalah bagian yang menarik: ketika Anda mengarahkan mouse ke "WHO", Anda akan melihat judul lengkap "World Health Organization". Itu seperti memiliki cincin dekoder untuk halaman web Anda!

Dan itu adalah, teman-teman! Anda sekarang dilengkapi dengan set alat tag petikan HTML. Ingat, tag ini tidak hanya tentang format - mereka menambahkan makna dan struktur ke konten Anda, membuatnya lebih mudah diakses dan ramah SEO.

Sekarang, saat kita mengakhiri, saya teringat petikan (lihat apa yang saya lakukan di sana?) dari seorang siswa yang pernah mengatakan kepadaku, "HTML seperti LEGO untuk dewasa!" Dan Anda tahu apa? Mereka benar. Setiap tag adalah seperti blok LEGO yang berbeda, dan Anda adalah master builder yang menciptakan struktur web yang menakjubkan.

Jadi, teruskan dan buat petikan, cantumkan sumber, dan buat singkatan sampai hati Anda puas. Dan ingat, dalam kata-kata abadi seorang pengembang web bijak: Dengan kekuatan HTML yang besar datang tanggung jawab yang besar! Selamat coding! ?

Credits: Image by storyset