Path Relatif vs Absolut
Nilai href dan src bisa ditulis dalam tiga bentuk, dan salah pilih adalah penyebab paling umum gambar tidak muncul. Path absolut memuat alamat lengkap (https://situs.com/logo.png) dan dipakai untuk sumber di luar situsmu. Path root-relative diawali garis miring (/gambar/logo.png), artinya dihitung dari akar situs — aman meski halamanmu berpindah folder. Path relatif (gambar/logo.png atau ../logo.png) dihitung dari lokasi file HTML saat ini, sehingga bisa rusak begitu file dipindahkan. Tanda ../ berarti naik satu folder.
👀 Contoh dulu
<a href="https://bps.go.id">Situs luar (absolut)</a> <a href="/tentang">Halaman lain di situs ini (root-relative)</a> <img src="../aset/logo.png" alt="Logo">
Hasilnya: Tiga cara menunjuk berkas: alamat lengkap, dari akar situs, dan naik satu folder dari lokasi file ini.
💡 ../ berarti naik satu folder. Kalau gambarmu tidak muncul, path inilah yang pertama harus kamu periksa.
📝 Sekarang giliranmu
Halamanmu berada di folder blog/ dan gambarnya di folder aset/ yang sejajar dengan blog/. Tulis elemen <img> yang menunjuk aset/foto.jpg memakai path relatif yang naik satu folder, dengan alt Foto artikel.