Halaman berisi teks saja sudah berfungsi, tetapi hampir semua halaman nyata memuat gambar: foto produk, logo kedai, diagram, potret tim. HTML tidak menyimpan piksel gambar itu di dalam berkasnya — HTML hanya menuliskan rujukan, dan browser yang mengambil berkasnya. Pemisahan ini membuat gambar ringan dituliskan, tetapi juga mudah salah: satu rujukan yang meleset cukup untuk membuat halaman kehilangan gambarnya.

Chapter ini membahas anatomi elemen img dari dasarnya: status elemen ini sebagai void element, dua atribut yang praktisnya wajib, dan cara browser memproses rujukannya.

img adalah Void Element #

Aturannya tegas: elemen img tidak memiliki tag penutup dan tidak memiliki isi — seluruh informasinya dibawa oleh atribut. Elemen img tergabung dalam daftar void element bersama br, hr, dan input yang kita kenal di Section Pengenalan HTML.

Mekanismenya berjalan begini: saat browser mem-parsing dokumen dan bertemu <img>, browser membaca atributnya, mengirim satu request terpisah untuk berkas gambar yang dirujuk, lalu menempatkan hasilnya di posisi elemen tersebut. Parsing teks tidak menunggu gambar — kedua proses berjalan bersamaan.

Dua Atribut Praktis Wajib #

HTML menyediakan banyak atribut untuk gambar, tetapi dua di antaranya dipakai pada hampir setiap penulisan: src untuk alamat berkas dan alt untuk teks pengganti. Spesifikasi HTML menuntut alt selalu hadir pada img. Contoh paling dasarnya:

html 
<img src="assets/logo.svg" alt="Kedai Kopi Siti">
<p>Sarapan favorit pelanggan kami:</p>
<img src="assets/kopi.jpg" alt="Segelas kopi tubruk di atas meja kayu">

Hasil render: halaman menampilkan logo kedai, diikuti paragraf pengantar, lalu foto segelas kopi tubruk. Bila salah satu berkas tidak ditemukan, browser menampilkan ikon gambar gagal termuat bersama teks alt-nya di tempat gambar itu seharusnya berada — itulah salah satu alasan alt selalu dituliskan.

Lihat langsung kedua gambar itu pada posisinya masing-masing:

Pada demo, kedua berkas lokal diganti placeholder SVG agar gambar langsung terlihat, dan pasangan width/height ditambahkan agar ukurannya pasti — markup intinya sama persis.

Mari kita telaah kode di atas:

  1. Baris 1 (src="assets/logo.svg"): rujukan ke berkas di folder assets — penulisan jalurnya dibahas lengkap di chapter berikutnya.
  2. Baris 1 (alt="Kedai Kopi Siti"): teks pengganti sekaligus label yang dibacakan pembaca layar untuk logo.
  3. Baris 3-4 (<img ...> tanpa penutup): karena void element, img selesai sebaris; tidak ada </img> dan tidak boleh ada.

Gambar Dirujuk, Bukan Disalin #

Konsekuensi penting dari mekanisme rujukan: berkas HTML dan berkas gambar adalah dua berkas terpisah yang harus dikirim bersama. Mengganti nama berkas, memindahkan folder, atau mengunggah HTML tanpa foldernya akan memutus rujukan tersebut. Browser tetap merender halaman, tetapi tempat gambar hanya berisi ikon gagal termuat beserta teks alt.

Ringkasan #

  • img adalah void element tanpa tag penutup; seluruh informasinya dibawa atribut.
  • src dan alt praktisnya wajib; spesifikasi menuntut alt selalu ditulis.
  • Gambar dirujuk alamatnya, bukan disalin isinya; HTML dan berkas gambar dikirim bersama.
  • Rujukan yang gagal menghasilkan ikon gagal termuat plus teks alt di posisi gambar.

Chapter berikutnya membedah atribut pertama: src, alamat tempat browser mengambil berkas gambar.