Link, Gambar, dan Media di HTML

Di dua episode sebelumnya kamu sudah bisa menulis teks di halaman web: judul, paragraf, dan format teks. Sekarang saatnya menghubungkan halamanmu ke dunia luar. Tanpa link, website cuma sekumpulan dokumen yang terisolasi. Tanpa gambar dan media, website terasa seperti koran tanpa foto. Episode ini adalah episode ketiga dari seri HTML Basic, dan materinya akan dipakai hampir di setiap halaman yang akan kamu buat selamanya.

Ada dua persepsi salah yang perlu diluruskan dulu. Pertama, banyak pemula mengira link cuma soal tulisan biru bergaris bawah yang bisa diklik. Padahal link adalah sistem alamat web: dia punya jenis-jenis tujuan, aturan keamanan, dan cara kerja relatif vs absolut yang kalau salah bisa bikin navigasi websitemu berantakan. Kedua, banyak yang mengira gambar cukup dipasang lalu beres, dan atribut alt cuma formalitas. Padahal alt adalah satu-satunya cara pengguna tunanetra "melihat" gambarmu lewat screen reader, dan mesin pencari memakainya untuk memahami isi gambar. Jadi materi ini bukan sekadar "cara masang gambar". Ini soal membuat web yang benar.

Link, Jalan Tol Antar Halaman Web

Bayangkan web seperti kota besar. Setiap halaman adalah sebuah bangunan, dan link adalah jalan yang menghubungkan bangunan-bangunan itu. Tag untuk membuat link adalah <a> (singkatan dari anchor), dengan atribut terpentingnya: href, alamat tujuannya.

<a href="https://www.google.com">Kunjungi Google</a>

Ada dua cara menulis alamat tujuan. Alamat absolut menulis alamat lengkap dari awal, seperti alamat rumah lengkap dengan kota dan kode pos: https://contoh.com/tentang.html. Alamat relatif menulis alamat dari posisi file saat ini, seperti memberi petunjuk "belok kiri dua blok dari sini": tentang.html atau ../gambar/foto.jpg. Untuk link antar halaman di website yang sama, pakai alamat relatif. Kenapa? Karena kalau suatu hari domain websitemu berubah, semua link relatif tetap bekerja tanpa perlu diedit satu per satu. Alamat absolut hanya dipakai untuk link ke website orang lain.

A. <a href="profil.html">Profil</a>
B. <a href="halaman/profil.html">Profil</a>
C. <a href="../profil.html">Profil</a>

Secara default, link terbuka di tab yang sama dan pengunjung meninggalkan halamanmu. Kadang itu yang kamu mau, tapi untuk link ke website lain, lebih sopan membukanya di tab baru dengan target="_blank". Namun ada satu aturan keamanan yang wajib: selalu pasangkan dengan rel="noopener noreferrer". Tanpa itu, halaman yang dibuka di tab baru bisa mengakses halaman lamamu lewat objek window.opener dan diam-diam mengalihkannya ke halaman phishing. Serangan ini disebut reverse tabnabbing. Modern browser memang sudah melindungi sebagian, tapi menulis atributnya secara eksplisit tetap praktik terbaik.

<a href="https://contoh.com" target="_blank" rel="noopener noreferrer">
  Buka di tab baru dengan aman
</a>

Link juga bisa menunjuk ke bagian dalam halaman yang sama (disebut anchor link), memicu email, menelepon, atau mengunduh file:

<a href="#kontak">Lompat ke bagian kontak</a>
<h2 id="kontak">Hubungi Saya</h2>

<a href="mailto:hallo@contoh.com">Kirim email</a>
<a href="tel:+6281234567890">Telepon saya</a>
<a href="brosur.pdf" download>Unduh brosur (PDF)</a>

Satu etika menulis link: jangan pakai teks "klik di sini". Teks link yang baik menjelaskan tujuannya, misalnya "Unduh panduan belajar HTML (PDF)". Screen reader sering membacakan daftar link secara terpisah dari konteks kalimatnya, jadi "klik di sini" yang dibaca berulang-ulang tidak memberi informasi apa-apa.

Gambar yang Benar, Bukan Sekadar Nempel

Tag gambar adalah <img>, dan dia tidak punya tag penutup. Dua atribut wajibnya: src (sumber gambarnya) dan alt (teks pengganti).

<img src="foto-pantai.jpg" alt="Pantai berpasir putih dengan perahu nelayan saat senja">

Analogi paling gampang untuk memahami alt: bayangkan kamu menelepon temanmu dan harus menjelaskan isi sebuah foto. Kamu tidak akan bilang "gambar" lalu selesai, kan? Kamu akan menjelaskan apa yang terlihat. Itulah alt. Kalau gambarnya gagal dimuat, browser menampilkan teks alt sebagai gantinya. Kalau pengunjung memakai screen reader, teks inilah yang dibacakan. Dan Google memakai alt untuk memahami isi gambar, yang membantu SEO. Tulis deskripsi yang ringkas, jangan diawali "gambar dari...", dan kalau gambarnya murni dekorasi (misalnya garis pemisah), pakai alt="" kosong supaya screen reader melewatinya.

A. <img src="kue.jpg">
B. <img src="kue.jpg" alt="IMG_20261014.jpg">
C. <img src="kue.jpg" alt="Kue cokelat lapis tiga dengan taburan stroberi">

Tiga atribut pendukung yang membuat gambarmu kelas profesional:

• width dan height: tulis ukuran asli gambar. Browser jadi bisa menyiapkan ruang sebelum gambar selesai diunduh, sehingga halaman tidak "melompat" saat gambar muncul (istilahnya layout shift).
• loading="lazy": menunda unduhan gambar sampai pengunjung scroll mendekatinya. Halaman awal jadi terbuka lebih cepat. Jangan pakai ini untuk gambar hero di bagian paling atas, karena justru memperlambat gambar yang paling penting.
• <figure> dan <figcaption>: membungkus gambar beserta keterangannya sebagai satu kesatuan yang bermakna.

<figure>
  <img src="kebun.jpg" alt="Kebun teh hijau membentang di pagi hari"
       width="800" height="600" loading="lazy">
  <figcaption>Kebun teh tempat saya belajar memotret, 2026.</figcaption>
</figure>

Audio dan Video Tanpa Plugin

Zaman dulu, memutar video di web butuh plugin tambahan seperti Flash. Sekarang HTML punya tag bawaan: <audio> dan <video>. Keduanya memakai atribut controls untuk menampilkan tombol play, volume, dan progress bar bawaan browser.

<video width="640" height="360" controls>
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  Browser kamu tidak mendukung tag video.
</video>

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung tag audio.
</audio>

Kenapa ada dua <source>? Karena tiap browser mendukung format video yang sedikit berbeda. Browser akan mencoba satu per satu dari atas sampai menemukan format yang bisa diputar. Teks di baris terakhir hanya muncul kalau browser benar-benar tidak mendukung tag video sama sekali. Pola "sediakan cadangan" ini adalah cara berpikir penting dalam web development: jangan berasumsi semua pengunjung memakai browser yang sama denganmu.

<video src="film.mp4"></video>

Latihan: Bikin Halaman Galeri Mini

Jangan cuma dibaca, praktikkan. Buat file baru bernama galeri.html di folder latihanmu, lalu kerjakan ini:

1. Tambahkan 3 gambar (boleh pakai gambar bebas dari picsum.photos) lengkap dengan alt yang deskriptif, width, height, dan loading="lazy" pada dua gambar terakhir. Jangan cuma copy-paste contoh di artikel ini, pakai gambarmu sendiri.
2. Di bawah setiap gambar, tambahkan link "Lihat ukuran penuh" yang membuka gambar di tab baru dengan atribut keamanan yang benar.
3. Tambahkan satu video pendek (boleh dari situs sampel seperti test-videos.co.uk) dengan controls dan dua format source.
4. Bonus: bungkus satu gambar dengan <figure> dan <figcaption>, lalu matikan internet sebentar dan refresh halaman. Perhatikan apa yang ditampilkan browser sebagai pengganti gambar.

Di episode berikutnya, seri HTML Basic berlanjut ke List, Tabel, dan Form di HTML. Kamu akan belajar membuat daftar, menyajikan data dalam tabel yang rapi, dan yang paling penting: membuat form supaya pengunjung bisa mengirim data ke websitemu. Siapkan rasa penasaranmu, karena form adalah jembatan pertama menuju web yang interaktif.