HTML element tag <img> (image) merupakan tag HTML digunakan untuk menyisipkan suatu gambar ke dalam suatu halaman HTML. HTML element tag <img> berfungsi sebagai kontainer bagi suatu sumber daya gambar yang merujuk pada suatu URL dengan isi data file gambar. HTML elemen tag ini tidak sepenuhnya memasukkan suatu file gambar secara langsung ke dalam halaman HTML, namun yang dilakukan adalah dengan perujukan file gambar melalui atribut URL. Jika file gambar yang dirujuk berhasil ditemukan, maka dokumen HTML akan menampilkan gambar tersebut. Namun jika tidak ditemukan maka gambar tidak akan ditampilkan.
HTML element tag <img> adalah element dengan penulisan self close yang penulisannya dilakukan melalui tag pembuka <img> dan tidak membutuhkan tag penutup.
Atribut penting yang harus disertakan adalah atribut "SRC" yang merupakan kepanjangan dari source atau sumber. Atribut ini digunakan untuk melakukan rujukan terhadap file gambar yang akan disisipkan pada halaman HTML. File gambar tersebut harus berada di dalam folder yang sama dengan file HTML-nya, jika berada di luar folder maka perlu dilakukan penunjukkan secara langsung melalui metode penulisan URL di mana gambar tersebut berada.
Penataan ukuran gambar pada tag tag <img> dilakukan dengan menyertakan atribut WIDTH (lebar) dan HEIGHT (tinggi). Untuk mendapatkan gambar yang proporsional, cukup dituliskan salah satu atribut saja. Misalnya jika dituliskan width="600" tanpa atribut height, maka atribut height oleh browser akan dijadikan auto-height menyesuaikan dengan rasio perbandingan lebar dan tinggi gambar normal. Jika kedua atribut dituliskan semuanya tanpa mempertimbangkan rasio perbandingan gambar, akan mendapatkan gambar yang terkesan "gepeng" atau tidak proporsional.
Atribut Khusus
HTML element tag <img> memiliki beberapa atribut yang digunakan untuk menampilkan gambar image dan juga menata tampilannya.
Atribut khusus pada elemen <img> meliputi :
Berikut ini penggunaan HTML element tag <img> :
HTML
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag IMG</title>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag IMG</h1>
<img src="ikan-paus.png" alt="gambar ikan paus" width="330px"/>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <img> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <img> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <img> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <img> pada HTML :
CSS
1
2
3
Previous Pageimg{
display : inline-block;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
