HTML Atribut <img> alt
Definisi dan penggunaan
alt Atribut ini adalah atribut wajib, yang menentukan teks pengganti saat gambar tidak dapat ditampilkan.
Jika pengguna tidak dapat melihat gambar karena alasan berikut, atribut alt dapat menyediakan informasi pengganti untuk gambar:
- Kecepatan koneksi internet terlalu lambat
- Kesalahan di atribut src
- Peramban menonaktifkan gambar
- Pengguna menggunakan alat baca layar
Atribut alt dari tag <img> menentukan teks pengganti yang digunakan untuk menggantikan gambar yang tidak dapat ditampilkan atau saat pengguna menonaktifkan tampilan gambar di dalam peramban.
Kami menyarankan dengan sungguh-sungguh untuk menggunakan atribut ini di setiap gambar dalam dokumen. Demikian, bahkan jika gambar tidak dapat ditampilkan, pengguna masih dapat melihat beberapa informasi tentang apa yang hilang. Dan untuk orang cacat, atribut alt biasanya adalah cara satu-satunya untuk mengerti konten gambar.
Peringatan:Untuk membuat tooltip untuk gambar, gunakan Atribut title!
Tooltip dan Keterangan
Keterangan:alt Nilai atribut adalah string yang dapat mengandung maksimal 1024 karakter, termasuk spasi dan tanda baca. String ini harus disi dengan tanda kutip. Teks alt ini dapat mengandung referensi entitas karakter khusus, tetapi tidak diizinkan mengandung tanda pengenal kategori lain, terutama tanpa tanda pengatur gaya.
Keterangan:Ketika pengguna memindahkan mouse ke elemen img, Internet Explorer akan menampilkan nilai atribut alt. Perilaku ini tidak benar. Semua peramban lainnya sedang mendekati standar, hanya menampilkan teks pengganti saat gambar tidak dapat ditampilkan.
Peringatan:Jika Anda ingin membuat tooltip untuk gambar, gunakan Atribut title。
Contoh
Contoh 1
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
Jika gambar tidak dapat ditampilkan, peramban akan menampilkan teks pengganti, seperti ini:
Selain itu, saat pengguna memindahkan mouse ke atas gambar, peramban terbaru akan menampilkan teks deskriptif di dalam kotak teks. Kode di bawah ini menambahkan teks deskriptif ke atribut alt untuk gambar:}
Anda dapat memindahkan mouse ke atas foto di bawah ini untuk melihat efek yang sesuai:
Teks di lingkaran merah adalah efek yang ditampilkan oleh peramban IE7 saat pengguna memindahkan mouse ke atas gambar:
Contoh 2
Gambar yang ditentukan untuk teks gantian adalah:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Syarat
<img alt="text">
Nilai atribut
| Nilai | Deskripsi |
|---|---|
| text |
Tentukan teks gantian gambar. Prinsip penggunaan teks alt:
|
Dukungan peramban
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Dukungan | Dukungan | Dukungan | Dukungan | Dukungan |
