HTML - Quotasi: Menambah Kedalaman dan Kredibilitas ke Dalam Konten Web Anda

Hai teman-teman, calon pengembang web! Hari ini, kita akan mandar ke dunia HTML quotasi. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk mengorbit Anda dalam perjalanan ini. Percayalah, pada akhir pelajaran ini, Anda akan mengutip seperti Shakespeare dalam HTML! ?

Daftar Tag Quotasi HTML

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

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

Sekarang, mari kita jelajahi setiap tag ini secara rinci!

HTML "" untuk Quotasi

Tag <q> sangat cocok untuk quotasi pendek, dalam teks. Itu seperti pisau瑞士 Army knife dari tag quotasi - kecil, tapi sangat berguna!

<p>seperti Shakespeare pernah katakan, <q>Adakah ataukah bukan, itu adalah pertanyaan.</q></p>

Ketika dirender di browser, ini akan tampak seperti ini:

seperti Shakespeare pernah katakan, "Adakah ataukah bukan, itu adalah pertanyaan."

Perhatikan bagaimana browser secara otomatis menambah tanda kutip di sekitar teks dalam tag <q>. Itu seperti memiliki editor kecil, sungguh dan rajin, bekerja di belakang layar!

HTML "

" untuk Quotasi

Apa bila Anda ingin mengutip seluruh paragraf? Itu adalah tempat teman kita <blockquote> berguna. Itu saudara besar <q>, dirancang untuk quotasi panjang.

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

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

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

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

HTML "" untuk Quotasi

Sekarang kita sudah mengutip orang, itu adil untuk memberikan mereka kredit, kan? Itu tempat tag <cite> berguna. Itu digunakan untuk merujuk ke sumber quotasi.

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

Ini akan menampilkan quotasi dengan sumber yang dicantumkan di bawah:

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

— Steve Jobs

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

HTML "

" untuk Quotasi

Meskipun namanya, tag <address> tidak hanya untuk alamat jalan. Itu digunakan untuk semua jenis informasi kontak untuk 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 sebagai:

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

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

HTML "" untuk Quotasi

Pernahkah Anda ingin menulis ke belakang? Tag <bdo> (Bi-Directional Override) 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 untuk bahasa yang ditulis kanan ke kiri, seperti Arab atau Ibrani.

HTML "" untuk Quotasi

Akhirnya, 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 kursor ke "WHO", Anda akan melihat judul lengkap "World Health Organization". Itu seperti memiliki cincin dekoder untuk halaman web Anda!

Dan begitulah, teman-teman! Anda sekarang dilengkapi dengan set alat tag quotasi HTML. Ingat, tag ini tidak hanya tentang format - mereka menambahkan makna dan struktur ke konten Anda, membuatnya lebih aksesibel dan ramah SEO.

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

Jadi, maju saja dan kutip, cantumkan sumber, dan singkatkan ke hati Anda. 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