Lo yang lagi belajar bikin website pasti pernah mikir: “Gimana caranya biar teks di web gue keliatan lebih rapi, berfaedah, tapi tetep keren?” Nah, HTML punya beberapa elemen khusus yang bikin teks lo tampil beda. Kali ini, kita bakal bahas tentang quotation elements dan beberapa elemen lain kayak <abbr>, <address>, <cite>, dan <bdo> yang pastinya bakal bikin web lo makin profesional.
1. <blockquote>: Kutipan Panjang yang Rapi
Buat lo yang suka nulis artikel panjang dan nyisipin kutipan, elemen <blockquote> ini wajib banget lo pake. Biasanya dipake buat kutipan panjang, kayak cerita inspirasi atau wawancara.
Contoh:
<blockquote cite="https://www.sovyan.com">
Kesuksesan datang dari kerja keras, konsistensi, dan doa yang tulus.
</blockquote>
Hasilnya:
Pro Tip: Jangan lupa tambahin atribut cite buat nyantumin sumber kutipan. Ini penting biar web lo keliatan kredibel.
2. <q>: Kutipan Pendek, Tapi Keren
Buat kutipan pendek, <q> adalah pilihan terbaik. Elemen ini otomatis nambahin tanda petik di sekitar teks. Contoh:
<p>Kata ibu gue, <q>jangan lupa makan sebelum kerja</q>. </p>
Hasilnya:
3. <abbr>: Bikin Singkatan Punya Makna
Pernah nemu singkatan di web yang kalau disentuh muncul penjelasannya? Itu kerjaannya <abbr>.
Contoh:
<p>HTML itu singkatan dari <abbr title="HyperText Markup Language">HTML</abbr>, bro.</p>
Hasilnya:
Penjelasan :
HTML itu singkatan dari HTML (cuma kalau kursor lo arahkan ke kata “HTML”, muncul tulisan HyperText Markup Language).
Pake <abbr> cocok banget buat nambahin profesionalitas di teks lo, terutama di artikel teknis.
4. <address>: Tempat Nulis Info Kontak
Kalo web lo butuh halaman “Contact Us”, <address> adalah elemen andalan buat nulis info kontak, kayak nama perusahaan, alamat, atau email.
Contoh:
<address>
Jl. Jendral Coding No.1<br>
Jakarta Selatan, Indonesia<br>
Email: <a href="mailto:halo@webkeren.com">halo@webkeren.com</a>
</address>
Hasilnya:
Tampilan ini biasanya default miring, bikin jelas kalau itu info kontak.
5. <cite>: Referensi Keren ala Profesional
Elemen <cite> cocok buat nyantumin judul karya kayak buku, film, atau artikel. Selain bikin tampilan lebih rapi, elemen ini juga bisa ningkatin SEO lo!
Contoh:
<p>Film favorit gue sepanjang masa adalah <cite>Interstellar</cite>.</p>
Hasilnya:
6. <bdo>: Bikin Teks Kebalik (Kiri ke Kanan atau Sebaliknya)
Mau coba eksperimen styling teks? Pake <bdo> alias Bidirectional Override. Elemen ini cocok buat nulis teks dari kanan ke kiri (RTL) atau sebaliknya.
Contoh:
<bdo dir="rtl">Ini teks yang kebalik dari kanan ke kiri.</bdo>
Hasilnya:
Hasilnya bakal kebalik arah dari default teks. Cocok banget buat bahasa yang punya arah penulisan beda, kayak Arab atau Ibrani.
Tips SEO dan User Experience
- Gunakan elemen secara tepat: Misalnya
<cite>buat karya seni, bukan buat nama orang. - Tambahkan atribut title: Kayak di
<abbr>biar user ngerti maksud singkatan. - Optimalkan tampilan mobile: Jangan cuma enak dilihat di PC doang.
Kesimpulan
Bikin teks web lo gak harus monoton. Dengan elemen kayak <blockquote>, <q>, <abbr>, <address>, <cite>, dan <bdo>, tampilan konten lo bisa jadi lebih rapi, relevan, dan profesional. Yang penting, pastiin lo pake elemen ini sesuai fungsinya.
Sekarang, saatnya bikin web lo makin wow! Udah siap nyobain?
Komentar