Image HTML: Cara Menampilkan Gambar dengan Tag img dan Atribut src alt

Image HTML adalah cara menampilkan gambar di halaman web menggunakan tag <img>. Dalam praktik pembuatan halaman, elemen gambar hampir selalu dipakai untuk membantu penjelasan visual dan memperjelas konten. Tag ini memanggil file dari lokasi tertentu lalu merendernya di browser. Supaya tampil dengan benar, ada beberapa atribut penting yang wajib dipahami seperti src dan alt. Di materi ini kamu akan belajar struktur dasarnya, arti tiap atribut, cara penulisan path, serta contoh praktik dan latihan soal.

Apa Itu Image HTML dan Fungsi Tag img

Image HTML merujuk pada penggunaan tag <img> untuk memanggil file gambar agar ditampilkan di browser. Berbeda dengan paragraf atau heading yang punya tag pembuka dan penutup, tag img adalah elemen tunggal (self-closing). Artinya tidak punya tag penutup.

Contoh paling dasar:

<img src="foto.jpg">

Namun praktik yang benar tidak berhenti di situ. Ada atribut penting lain yang harus ditambahkan.

Struktur Dasar Tag img pada Image HTML

Struktur umum:

<img src="alamat-file" alt="deskripsi">

Komponen utamanya:

img = tag gambar
src = sumber file
alt = teks alternatif

Tanpa src → gambar tidak muncul.
Tanpa alt → buruk untuk aksesibilitas dan SEO.

Atribut src pada Image HTML

Atribut src berarti source, yaitu lokasi file gambar. Nilainya bisa berupa nama file lokal atau URL lengkap.

Contoh file di folder yang sama:

<img src="logo.png" alt="Logo">

Contoh dari URL luar:

<img src="https://example.com/logo.png" alt="Logo">

Browser akan mengambil file dari alamat tersebut.

Atribut alt dan Fungsinya

Alt berarti alternative text, yaitu teks pengganti jika gambar gagal dimuat atau dibaca screen reader. Ini juga penting untuk SEO gambar.

Mengatur Ukuran Gambar

Ukuran bisa diatur dengan atribut width dan height.

<img src="foto.jpg" alt="Profil" width="300">

Atau:

<img src="foto.jpg" alt="Profil" width="300" height="200">

Browser akan menyesuaikan tampilan sesuai nilai tersebut.

Path Relatif vs Absolut pada Image HTML

Lokasi file bisa ditulis relatif atau absolut.

Relatif (dalam folder proyek):

<img src="images/foto.jpg" alt="Foto">

Naik satu folder:

<img src="../foto.jpg" alt="Foto">

Absolut (URL penuh):

<img src="https://domain.com/images/foto.jpg" alt="Foto">

Untuk proyek lokal, relatif lebih sering dipakai.

Image HTML di Dalam Link

Gambar bisa dijadikan link dengan membungkusnya dalam tag a.

<a href="/produk">
  <img src="produk.jpg" alt="Produk">
</a>

Saat gambar diklik, pengguna pindah halaman.

Praktik Dasar: Menampilkan Beberapa Gambar

Coba praktik membuat halaman galeri sederhana.

<!DOCTYPE html>
<html>
<head>
  <title>Latihan Gambar</title>
</head>
<body>

<h2>Galeri</h2>

<img src="gambar1.jpg" alt="Pemandangan gunung" width="250">
<img src="gambar2.jpg" alt="Danau biru" width="250">

</body>
</html>

Simpan gambar di folder yang sama lalu buka di browser.

Contoh Salah dan Benar Penggunaan Tag img

Contoh kurang baik:

<img src="foto.jpg">

Kurang alt → tidak ramah aksesibilitas.

Contoh lebih baik:

<img src="foto.jpg" alt="tim pengembang sedang rapat">

Contoh alt buruk:

alt="image html image html image html"

Itu keyword stuffing.

Latihan Praktik Mandiri

Coba kerjakan latihan berikut.

Buat halaman yang menampilkan:

satu logo
satu foto profil
satu gambar yang bisa diklik menuju halaman lain
semua gambar punya alt deskriptif
minimal satu gambar pakai width

Contoh Soal Latihan

Soal 1

Tampilkan gambar bernama banner.png dengan lebar 400 piksel dan alt “banner belajar html”.

Soal 2

Tampilkan gambar produk.jpg yang saat diklik membuka halaman produk.html.

Soal 3

Tampilkan gambar dari URL luar dengan alt deskriptif.

Jawaban Contoh Soal

Solusi Soal 1:

<img src="banner.png" alt="banner belajar html" width="400">

Kode untuk Soal 2:

<a href="produk.html">
  <img src="produk.jpg" alt="foto produk">
</a>

Contoh Jawaban Soal 3:

<img src="https://example.com/foto.jpg" alt="contoh tampilan produk">

Kesalahan Umum Saat Memasang Gambar

Kesalahan yang sering terjadi:

lupa alt
salah path file
nama file tidak cocok huruf besar kecil
ukuran terlalu besar
alt diisi kata kunci berulang

Biasakan cek nama file dan folder.

Referensi Teknis Tag Gambar

Dokumentasi teknis tag img tersedia di MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML sebagai rujukan lanjutan.

Lanjutan Seri HTML Dasar

Setelah memahami image HTML dan atribut pentingnya, materi berikutnya membahas cara membuat tabel data menggunakan tag table, tr, td, dan th. Pastikan juga kamu sudah memahami <a href=”/hyperlink-html”>struktur link</a> agar gambar bisa dipakai sebagai navigasi. Berikutnya kita masuk ke tabel HTML secara praktik.

Post Views: 168