Menulis Kode HTML ALT Gambar, sultanPBN – Menulis kode HTML untuk gambar di website adalah langkah penting dalam pengembangan web, terutama ketika berbicara tentang aksesibilitas dan SEO. Salah satu atribut yang sangat penting untuk gambar adalah “alt”. Dalam artikel ini, kita akan membahas cara menulis kode HTML dengan atribut alt yang baik dan benar serta mengapa hal ini penting.
Apa Itu Atribut ALT?
Atribut alt (alternative text) adalah teks yang menggantikan gambar jika gambar tersebut tidak dapat ditampilkan. Teks ini juga dibaca oleh screen reader, yang membantu pengguna dengan keterbatasan penglihatan untuk memahami konten gambar. Selain itu, atribut alt juga membantu mesin pencari memahami konten gambar, yang dapat meningkatkan SEO situs web Kamu.
Cara Menulis Kode HTML ALT Gambar di Website
Berikut ini adalah langkah-langkah dan contoh untuk menulis kode HTML dengan atribut alt yang baik:
Gunakan Tag <img>
Tag <img> digunakan untuk menampilkan gambar di halaman web.
Tambahkan Atribut src
Atribut src menunjukkan URL atau path dari gambar yang ingin ditampilkan.
Tambahkan Atribut alt
Atribut ini digunakan untuk mendeskripsikan gambar.
Contoh dasar dari kode HTML dengan atribut alt:
html
Salin kode
<img src=”gambar-contoh.jpg” alt=”Deskripsi gambar yang jelas dan singkat”>
Tips Menulis Atribut ALT yang Baik
Deskriptif namun Ringkas
Tulis deskripsi yang cukup detail untuk menjelaskan gambar, tetapi tetap singkat dan to the point. Misalnya, daripada hanya menulis “gambar”, tulis “gambar kucing sedang tidur di sofa”.
Relevansi
Pastikan deskripsi alt relevan dengan konten gambar dan konteks halaman. Jika gambar adalah bagian dari tutorial memasak, alt bisa berupa “chef sedang memotong sayuran untuk salad”.
Hindari Pengulangan Kata
Jangan gunakan kata-kata seperti “gambar dari”, “foto”, atau “image of” karena ini sudah diketahui bahwa itu adalah gambar.
Contoh Penerapan Atribut ALT yang Baik
Berikut beberapa contoh penerapan atribut alt dalam berbagai situasi:
Gambar Dekoratif: Jika gambar hanya untuk dekorasi dan tidak menambah informasi, alt bisa dibiarkan kosong atau diberi nilai kosong (alt=””). Ini memberitahu screen reader untuk melewati gambar ini.
html
Salin kode
<img src=”dekorasi.jpg” alt=””>
Gambar Informasional: Jika gambar menyampaikan informasi penting, deskripsikan informasi tersebut dengan jelas.
html
Salin kode
<img src=”diagram-sales-2023.jpg” alt=”Diagram penjualan tahun 2023 yang menunjukkan peningkatan penjualan produk A”>
Gambar dengan Teks: Jika gambar berisi teks, alt harus menyertakan teks tersebut.
html
Salin kode
<img src=”poster-event.jpg” alt=”Poster acara: Workshop Menulis Kode HTML, 20 Juli 2024, pukul 10.00 WIB”>
Baca Juga: 5 Cara Lakukan Informational Intent SEO dengan Mudah
Kesimpulan
Menulis kode HTML dengan atribut alt yang baik dan benar adalah langkah kecil yang memiliki dampak besar pada aksesibilitas dan SEO situs web Kamu. Dengan memberikan deskripsi yang jelas dan relevan untuk setiap gambar, Kamu membantu semua pengguna memahami konten Kamu lebih baik dan memastikan situs web Kamu lebih mudah ditemukan oleh mesin pencari. Jadi, saat Kamu menambahkan gambar ke website Kamu, jangan lupa untuk menambahkan atribut alt yang informatif dan deskriptif!
