Perbedaan utama antara path relative dan absolute terletak pada titik acuannya: path relative menggunakan current working directory (direktori kerja saat ini) sebagai referensi, sedangkan path absolute merujuk pada direktori tertentu yang sudah pasti dan lengkap dari akar sistem atau URL eksternal.
Dalam pengembangan web dan struktur berkas HTML, pemilihan jenis path sangat menentukan keberhasilan pemuatan sumber daya (seperti gambar, stylesheet, atau tautan halaman). Path absolute menyertakan URL atau jalur file lengkap yang dimulai dari direktori root, sementara path relative hanya berisi jalur relatif berdasarkan lokasi file yang sedang diakses saat ini.
Matriks Perbandingan Path Absolute dan Relative
| Kriteria | Absolute Path | Relative Path |
|---|---|---|
| Titik Acuan | Direktori root situs atau URL lengkap dari domain luar. | Direktori kerja tempat file saat ini berada (current working directory). |
| Struktur Penulisan | Contoh: https://www.contoh.com/images/logo.png atau /images/logo.png |
Contoh: images/logo.png atau ../css/style.css |
| Kasus Penggunaan Utama | Menautkan sumber daya dari situs eksternal atau lokasi tetap yang tidak boleh berubah. | Menautkan berkas di dalam satu situs web yang sama agar mudah dipindahkan. |
| Kelebihan | Tidak akan rusak meskipun file pemanggil dipindahkan ke direktori lain. | Fleksibel saat situs dipindah ke domain atau subdomain baru selama struktur folder tetap. |
| Kekurangan | Akan rusak jika domain utama berubah atau struktur root diubah secara drastis. | Mudah rusak jika file dipindahkan ke folder lain tanpa memperbarui jalur relatifnya. |
Aturan Penggunaan dalam Pengembangan Web
Berdasarkan standar praktik terbaik (best practices) web development, berikut adalah aturan dasar yang perlu diikuti:
- Gunakan absolute paths ketika Anda ingin mereferensikan sumber daya dari lokasi tetap, seperti dari root situs Anda, dari direktori yang diketahui pada mesin lokal, atau saat menautkan ke sumber daya yang dihosting di situs web eksternal.
- Gunakan relative paths saat menghubungkan sumber daya di dalam satu situs web yang sama agar pengelolaan struktur folder lebih ringkas dan mudah dipindahkan secara lokal.
Contoh Implementasi Kode
Berikut adalah contoh perbandingan penulisan kode HTML untuk memanggil file gambar:
<!-- Contoh Absolute Path -->
<img src="https://www.contoh.com/images/banner.jpg" alt="Banner">
<!-- Contoh Relative Path -->
<img src="../images/banner.jpg" alt="Banner">