Itu HTML Tag IMG mengatur penyisipan gambar dan objek grafis statis lainnya dalam halaman web. Tag umum ini mendukung beberapa atribut wajib dan opsional yang menambah kekayaan kemampuan Anda untuk merancang situs web yang menarik dan berfokus pada gambar.
Contoh tag IMG HTML yang terbentuk sepenuhnya terlihat seperti ini:
Atribut Tag IMG yang Diperlukan
src="/jalur/ke/gambar.jpg"
Satu-satunya atribut yang Anda perlukan agar gambar ditampilkan di halaman web adalah src atribut. Atribut ini mengidentifikasi nama dan lokasi file gambar yang akan ditampilkan.
alt="Deskripsi gambar"
Untuk menulis XHTML dan HTML4 yang valid, alt atribut juga diperlukan. Atribut ini digunakan untuk menyediakan browser nonvisual dengan teks yang menjelaskan gambar. Browser menampilkan teks alternatif dengan cara yang berbeda. Beberapa menampilkannya sebagai pop-up saat Anda mengarahkan mouse ke gambar, yang lain menampilkannya di properti saat Anda mengklik kanan pada gambar, dan beberapa tidak menampilkannya sama sekali.
Menggunakan teks alternatif untuk memberikan detail tambahan tentang gambar yang tidak relevan atau penting dengan teks halaman web. Namun, ingat bahwa di pembaca layar dan browser lain yang hanya berisi teks, teks akan dibaca sejajar dengan teks lainnya di halaman. Untuk menghindari kebingungan, gunakan teks alternatif deskriptif yang mengatakan (misalnya), “Tentang Desain Web dan HTML”, bukan hanya “logo”.
Itu alt teks juga penting untuk SEO (Search Engine Optimization). Bot yang digunakan mesin telusur, seperti Google, untuk menjelajahi konten di situs tidak dapat "melihat" gambar. Mereka mengandalkan alt teks untuk menentukan apa yang ada di halaman.
Di HTML5, itu alt atribut tidak selalu diperlukan, karena Anda dapat menggunakan a keterangan untuk menambahkan lebih banyak deskripsi untuk itu. Anda juga dapat menggunakan atribut ini untuk menunjukkan ID yang berisi deskripsi lengkap:
aria-describedby="Deskripsi gambar"
Teks alternatif juga tidak diperlukan jika gambarnya murni dekoratif, seperti grafik di bagian atas halaman web atau ikon. Tetapi jika Anda tidak yakin, sertakan teks alternatif untuk berjaga-jaga.
Ukuran Atribut
lebar = "500"dan.
tinggi = "500"Tergantung pada desain Anda, menggunakan. tinggi dan. lebar
Umumnya, Anda ingin ukuran gambar diatur dalam CSS Anda. Lebih sering daripada tidak, itu akan menjadi hasil dari dimensi wadah induk gambar. Pendekatan ini memungkinkan fleksibilitas paling besar saat beradaptasi dengan ukuran layar yang berbeda. Namun, masih ada kasus di mana Anda mungkin ingin menentukan dimensi gambar sebagai atribut HTML.
Atribut IMG Berguna Lainnya
title="Nama gambar deskriptif"Atribut adalah atribut global yang dapat diterapkan ke mana saja. elemen HTML. Selain itu, judul
Sebagian besar browser mendukung judul atribut, tetapi mereka melakukannya dengan cara yang berbeda. Beberapa menampilkan teks sebagai pop-up sementara yang lain menampilkannya di layar informasi ketika pengguna mengklik kanan pada gambar. Anda dapat menggunakan judul atribut untuk menulis informasi tambahan tentang gambar, tetapi jangan berharap informasi ini disembunyikan atau terlihat. Anda seharusnya tidak menggunakan ini untuk menyembunyikan kata kunci untuk mesin pencari. Praktek ini sekarang dihukum oleh sebagian besar mesin pencari.
peta penggunaan=""dan.
ismap=""Kedua atribut ini mengatur sisi klien () dan sisi server (ISMAP) peta gambar
longdesc="Deskripsi lebih detail tentang gambar Anda"Itu. longdesc
Atribut IMG Usang dan Usang
Beberapa atribut sekarang sudah usang di HTML5 atau tidak digunakan lagi di HTML4. Untuk HTML terbaik, Anda harus mencari solusi lain daripada menggunakan atribut ini.
batas = "3"
sejajar = "kiri"Atribut ini memungkinkan Anda untuk menempatkan gambar di dalam teks dan membuat teks mengalir di sekitarnya. Anda dapat menyelaraskan gambar ke kanan atau kiri. Ini telah ditinggalkan dalam mendukung. float properti CSS
hspcace="10"dan.
vspasi="10"Itu. hspace dan. ruang v atribut menambahkan spasi secara horizontal ( hspace) dan vertikal ( ruang v
lowsrc="/path/ke/lowres.jpg"Itu. lowsrc atribut memberikan gambar alternatif ketika sumber gambar Anda sangat besar sehingga mengunduh sangat lambat. Misalnya, Anda mungkin memiliki gambar berukuran 500KB yang ingin Anda tampilkan di halaman web Anda, tetapi 500KB akan membutuhkan waktu lama untuk diunduh. Jadi Anda membuat salinan gambar yang jauh lebih kecil, mungkin dalam warna hitam putih atau hanya sangat dioptimalkan, dan memasukkannya ke dalam. lowsrc
Itu lowsrc atribut ditambahkan ke Netscape Navigator 2.0 ke tag. Itu adalah bagian dari DOM level 1 tetapi kemudian dihapus dari DOM level 2. Dukungan browser tidak jelas untuk atribut ini, meskipun banyak situs mengklaim bahwa itu didukung oleh semua browser modern. Itu tidak ditinggalkan di HTML4 atau usang di HTML5 karena tidak pernah menjadi bagian resmi dari kedua spesifikasi.
Hindari menggunakan atribut ini dan sebagai gantinya optimalkan gambar Anda agar dimuat dengan cepat. Kecepatan memuat halaman adalah bagian penting dari desain web yang baik, dan gambar besar sangat memperlambat halaman — bahkan jika Anda menggunakan lowsrc atribut.