Belajar HTML - Gambar dan Media Dasar
Episode ini membedah media dasar: elemen img dengan atribut alt, width, height, dan loading, plus figure dan figcaption untuk gambar yang punya keterangan, lengkap dengan praktik galeri kecil.
#Pendahuluan
Gambar membuat halaman hidup. Episode 6 membahas gambar dan media dasar — cara menyisipkan gambar dengan img, menulis teks alternatif dengan alt, membungkus gambar dengan keterangan lewat figure dan figcaption, serta strategi pemuatan gambar yang ringan.
Kunci episode ini bukan pada tag-nya, melainkan pada atribut alt yang sering diremehkan. Alt text yang baik menentukan apakah gambar bisa dipahami oleh pengguna buta, mesin pencari, dan saat gambar gagal dimuat.
#Elemen img
#src dan Atribut Pendukung
Gambar disisipkan dengan img, elemen void yang memuat atribut src untuk sumber gambar:
<img
src="foto/profil.jpg"
alt="Foto profil Arman di depan kantor"
width="400"
height="300"
>Atribut yang dipakai:
src: path atau URL gambar.alt: teks alternatif yang menjelaskan gambar.widthdanheight: dimensi dalam piksel, mencegah layout melompat saat gambar dimuat.
width dan height sebaiknya mengikuti dimensi asli gambar agar rasio tetap benar dan halaman tidak bergeser saat gambar muncul.
#Menulis Alt Text yang Benar
Aturan emas alt: tulis deskripsi yang mewakili fungsi gambar dalam konteks halaman.
- Gambar informatif: deskripsikan isinya, seperti
alt="Kopi tubruk di atas meja kayu". - Gambar dekoratif murni:
alt=""(kosong) agar screen reader melewatinya. - Logo dengan teks nama: gunakan teks namanya, seperti
alt="Kafe Kopi Nusantara". - Tombol gambar: gunakan aksi tombol, seperti
alt="Kirim formulir".
<img src="dekorasi/gradient.png" alt="" width="10" height="10">
<img src="logo/kafe.png" alt="Kafe Kopi Nusantara" width="200" height="60">Jangan menulis alt="foto.jpg" atau alt="gambar" — keduanya tidak memberi informasi apa pun.
#figure dan figcaption
#Mengaitkan Keterangan
Ketika gambar perlu keterangan, bungkus dalam figure dan tambahkan figcaption:
<figure>
<img
src="foto/pegunungan.jpg"
alt="Pemandangan pegunungan saat matahari terbit"
width="640"
height="400"
>
<figcaption>Pegunungan Dieng saat matahari terbit.</figcaption>
</figure>figure menandai konten yang mandiri — gambar, diagram, potongan kode — dan figcaption memberi keterangan. Keterangan ini berbeda dari alt: alt dibaca pengganti gambar, sedangkan figcaption tampil sebagai bagian dari halaman untuk semua orang.
#Pemuatan Gambar yang Ringan
#loading="lazy" dan decoding="async"
Gambar di bawah lipatan layar tidak perlu dimuat saat halaman pertama dibuka. Atribut loading="lazy" menunda pemuatan hingga gambar mendekati area pandang:
<img
src="galeri/produk-12.jpg"
alt="Produk ke-12 dari galeri"
width="400"
height="300"
loading="lazy"
decoding="async"
>Tambahkan decoding="async" agar browser tidak menunda rendering teks demi mendekode gambar. Gambar utama di atas lipatan sebaiknya tetap dimuat langsung — jangan diberi lazy — agar halaman tampak cepat.
#Memeriksa Ukuran Gambar
Sebelum memakai gambar, periksa ukuran dan formatnya lewat terminal:
file foto/profil.jpgOutput perintah file foto/profil.jpg menampilkan format seperti JPEG, dimensi, dan kedalaman warna. Biasakan mengecek dimensi agar width dan height yang kalian tulis sesuai dengan file aslinya.
#Latihan: Galeri Kecil
Buat galeri sederhana dengan kombinasi figure dan figcaption:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeri Perjalanan</title>
</head>
<body>
<h1>Galeri Perjalanan</h1>
<figure>
<img src="foto/pantai.jpg" alt="Pantai pasir putih saat sore" width="400" height="300" loading="lazy">
<figcaption>Pantai Selatan saat sore hari.</figcaption>
</figure>
<figure>
<img src="foto/gunung.jpg" alt="Puncak gunung tertutup kabut tipis" width="400" height="300" loading="lazy">
<figcaption>Pendakian pagi menuju puncak.</figcaption>
</figure>
</body>
</html>Pastikan folder foto berisi dua file gambar. Buka halaman lewat server lokal dengan python3 -m http.server 8080, lalu periksa di panel Network DevTools bahwa gambar kedua baru dimuat saat kalian menggulir ke bawah.
#Kesalahan Umum dan Solusinya
#Gambar yang Tidak Termuat
Gambar rusak biasanya karena path src salah. Periksa bahwa file berada di folder yang benar relatif terhadap halaman. Path relatif dihitung dari lokasi file HTML, bukan dari folder project.
#Alt Text yang Berlebihan
Menulis paragraf panjang di alt membuat pengguna screen reader mendengar deskripsi yang menjemukan. Tulis singkat dan padat; detail tambahan bisa diletakkan di figcaption.
#Penutup
Episode 6 membuat halaman kalian visual: img dengan src dan dimensi, alt yang tepat, figure dengan figcaption untuk keterangan, serta loading="lazy" agar pemuatan tetap ringan.
Inti yang harus dibawa pulang:
imgselalu butuhsrc; tulisaltyang mewakili fungsi gambar.- Gambar dekoratif memakai
alt=""; gambar informatif memakai deskripsi singkat. widthdanheightmencegah layout melompat saat gambar dimuat.figuredanfigcaptionuntuk gambar yang punya keterangan.- Gambar di bawah lipatan memakai
loading="lazy"dandecoding="async".
Di episode 7 selanjutnya kita akan membahas elemen semantik dan arti struktural — header, footer, main, section, dan article. Kalian akan meninggalkan kebiasaan div soup dan mulai membangun struktur yang bermakna.