Saat membuat website, kamu mungkin sering menulis URL seperti https://example.com/about.html, tetapi di kesempatan lain cukup menulis /about.html atau about.html.
Kelihatannya sederhana, tetapi Relative URL dan Absolute URL punya cara kerja yang berbeda. Salah memilih jenis URL bisa membuat link, gambar, CSS, JavaScript, atau resource lain mengarah ke tempat yang salah.
Di panduan ini kita akan membahas perbedaannya dari dasar, lengkap dengan contoh HTML, cara kerja ./ dan ../, root-relative URL, kapan sebaiknya menggunakan masing-masing jenis URL, sampai kesalahan yang sering dilakukan pemula.
Apa Itu Absolute URL?
Absolute URL adalah URL yang ditulis secara lengkap sehingga menunjukkan alamat resource secara utuh.
Contohnya:
<a href="https://example.com/about.html">Tentang Kami</a>
URL tersebut sudah memiliki protokol dan domain:
https://example.com/about.html
Karena alamatnya lengkap, browser tidak perlu menebak lokasi berdasarkan halaman yang sedang dibuka.
Contoh lain:
<img src="https://example.com/images/logo.png" alt="Logo">
<link rel="stylesheet" href="https://example.com/css/style.css">
Absolute URL biasanya mudah dikenali karena memiliki bentuk seperti:
https://domain.com/path/file
atau:
http://domain.com/path/file
Kapan Absolute URL digunakan?
Absolute URL cocok ketika kamu memang ingin menunjuk ke alamat yang spesifik dan lengkap.
Misalnya ketika membuat link menuju website lain:
<a href="https://developer.mozilla.org/">MDN Web Docs</a>
Atau ketika membutuhkan alamat lengkap dalam konteks tertentu, seperti URL yang akan dibagikan secara langsung.
Apa Itu Relative URL?
Relative URL tidak menuliskan alamat lengkap. Lokasinya ditentukan berdasarkan URL halaman atau base URL yang menjadi acuannya.
Contoh:
<a href="about.html">Tentang Kami</a>
Tidak ada https:// dan nama domain di sana.
Browser kemudian menentukan tujuan link berdasarkan URL halaman saat ini.
Misalnya halaman yang sedang dibuka adalah:
https://example.com/blog/index.html
Kemudian terdapat:
<a href="about.html">Tentang Kami</a>
Maka URL tersebut dapat diselesaikan menjadi:
https://example.com/blog/about.html
Inilah bagian yang sering membuat pemula sedikit tersandung. Relative URL bukan sekadar URL yang "dipendekkan". Browser benar-benar melakukan proses resolusi berdasarkan URL dasar.
Perbedaan Relative URL dan Absolute URL
Secara sederhana, perbedaannya seperti ini:
| Absolute URL |
Relative URL |
| Menyertakan alamat lengkap |
Tidak menyertakan alamat lengkap |
| Biasanya memiliki domain |
Bergantung pada URL dasar |
Contoh https://example.com/about |
Contoh about |
| Tidak bergantung pada lokasi file saat ini |
Dipengaruhi lokasi file saat ini |
| Cocok untuk alamat yang spesifik |
Praktis untuk resource dalam satu website |
Contoh paling gampang:
<a href="https://example.com/about.html">Absolute URL</a>
Sedangkan:
<a href="about.html">Relative URL</a>
Keduanya bisa menuju halaman yang sama, tetapi cara browser menentukan tujuannya berbeda.
Jenis Relative URL yang Perlu Kamu Kenal
Relative URL sebenarnya punya beberapa bentuk. Bagian ini penting karena about.html, ./about.html, ../about.html, dan /about.html tidak selalu berarti hal yang sama.
1. Relative URL tanpa awalan
Contoh:
<a href="about.html">Tentang Kami</a>
Jika halaman saat ini berada di:
https://example.com/blog/index.html
maka link tersebut akan mengarah ke:
https://example.com/blog/about.html
Browser menggunakan direktori dari URL saat ini sebagai dasar.
2. Menggunakan ./
Tanda ./ berarti lokasi relatif terhadap direktori saat ini.
Contoh:
<a href="./about.html">Tentang Kami</a>
Dalam banyak kasus, hasilnya sama dengan:
<a href="about.html">Tentang Kami</a>
Misalnya:
https://example.com/blog/index.html
akan mengarah ke:
https://example.com/blog/about.html
Penulisan ./ sering berguna ketika kamu ingin membuat struktur path terlihat lebih eksplisit.
3. Menggunakan ../
Nah, ini yang cukup sering bikin link "menghilang".
../ berarti naik satu tingkat direktori.
Misalnya halaman berada di:
https://example.com/blog/tutorial/index.html
Kemudian kamu menulis:
<a href="../about.html">Tentang Kami</a>
Browser akan naik dari:
/blog/tutorial/
ke:
/blog/
sehingga hasil akhirnya:
https://example.com/blog/about.html
Kalau ingin naik dua tingkat:
<a href="../../about.html">Tentang Kami</a>
Semakin banyak ../, semakin jauh browser naik melalui struktur path.
4. Root-relative URL
Ada satu bentuk yang sering dianggap relative URL, tetapi cara kerjanya sedikit berbeda:
<a href="/about.html">Tentang Kami</a>
Tanda / di awal menunjukkan root dari domain.
Misalnya halaman saat ini:
https://example.com/blog/tutorial/index.html
Link:
<a href="/about.html">Tentang Kami</a>
akan menuju:
https://example.com/about.html
Perhatikan bedanya dengan:
<a href="about.html">Tentang Kami</a>
Yang kedua relatif terhadap direktori saat ini.
Jadi:
about.html
dan:
/about.html
bukan hal yang sama.
Contoh Perbandingan yang Lebih Jelas
Bayangkan struktur website seperti ini:
example.com/
├── index.html
├── about.html
├── contact.html
└── blog/
├── index.html
└── tutorial/
└── html.html
Jika kita berada di:
/blog/tutorial/html.html
maka beberapa link berikut akan menghasilkan tujuan berbeda.
<a href="about.html">About</a>
Menuju:
/blog/tutorial/about.html
Sedangkan:
<a href="../about.html">About</a>
menuju:
/blog/about.html
Dan:
<a href="../../about.html">About</a>
menuju:
/about.html
Sementara:
<a href="/about.html">About</a>
langsung menuju:
/about.html
Sedangkan:
<a href="https://example.com/about.html">About</a>
menggunakan absolute URL.
Di sinilah relative URL mulai terasa seperti peta. Browser tidak melihat alamat pendek tersebut sendirian. Ia melihatnya bersama lokasi halaman yang sedang menjadi titik awal.
Absolute URL vs Root-Relative URL
Ini juga sering membingungkan.
Perhatikan dua URL berikut:
https://example.com/about.html
dan:
/about.html
Yang pertama adalah absolute URL lengkap.
Yang kedua tidak menyertakan protokol dan domain. Ia bergantung pada origin/domain halaman saat ini.
Misalnya:
https://example.com/blog/
maka:
/about.html
akan menuju:
https://example.com/about.html
Namun jika halaman berada di:
https://example.net/blog/
URL yang sama akan menjadi:
https://example.net/about.html
Jadi root-relative URL masih bergantung pada domain tempat halaman tersebut berada.
Relative URL pada HTML
Relative URL sangat umum digunakan dalam HTML.
Contohnya untuk link:
<a href="artikel.html">Baca Artikel</a>
Untuk gambar:
<img src="images/logo.png" alt="Logo Website">
Untuk CSS:
<link rel="stylesheet" href="css/style.css">
Dan untuk JavaScript:
<script src="js/script.js"></script>
Semua URL tersebut akan diproses relatif terhadap URL dasar yang berlaku pada dokumen.
Karena itu, struktur folder dan lokasi file sangat penting ketika menggunakan relative path.
Bagaimana Relative URL Bekerja pada Website?
Misalnya kamu punya struktur:
website/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
└── logo.png
Di index.html, kamu bisa menulis:
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<img src="images/logo.png" alt="Logo">
Ini membuat struktur kode lebih ringkas.
Tetapi ketika struktur halaman berubah, path relatif juga harus diperiksa kembali.
Misalnya halaman dipindahkan ke:
website/blog/index.html
path:
<img src="images/logo.png">
sekarang akan dicari di:
website/blog/images/logo.png
bukan:
website/images/logo.png
Kalau folder tersebut tidak ada, gambar bisa gagal dimuat.
Kesalahan Relative URL yang Sering Dilakukan Pemula
Ada beberapa kesalahan kecil yang kelihatannya sepele tetapi bisa membuat website berantakan.
Salah menghitung ../
Misalnya file berada di:
/blog/tutorial/html/index.html
tetapi kamu menulis:
<a href="../about.html">About</a>
Link tersebut hanya naik satu tingkat.
Kalau target sebenarnya berada di root:
/about.html
kamu mungkin membutuhkan:
<a href="../../../about.html">About</a>
atau lebih sederhana menggunakan root-relative URL:
<a href="/about.html">About</a>
Menganggap about.html sama dengan /about.html
Ini juga sering terjadi.
about.html
berarti relatif terhadap lokasi saat ini.
Sedangkan:
/about.html
berarti dari root domain.
Perbedaannya cuma satu karakter, tetapi efeknya bisa cukup jauh.
Menggunakan relative URL tanpa memperhatikan lokasi halaman
Sebuah path yang bekerja sempurna di homepage belum tentu bekerja di halaman artikel yang berada beberapa tingkat lebih dalam.
Karena itu, ketika struktur website mulai besar, biasakan melihat URL halaman saat ini sebelum menentukan relative path.
Mana yang Lebih Baik untuk SEO?
Tidak ada aturan sederhana bahwa absolute URL selalu lebih bagus untuk SEO atau relative URL selalu lebih bagus.
Yang jauh lebih penting adalah link dapat dirayapi, tujuannya benar, dan anchor text-nya memberikan konteks yang jelas.
Misalnya:
<a href="/tutorial-html.html">Panduan HTML untuk Pemula</a>
lebih informatif dibanding:
<a href="/tutorial-html.html">Klik di sini</a>
Untuk internal linking, gunakan anchor text yang menjelaskan halaman tujuan secara natural.
Misalnya ketika membahas HTML, kamu bisa menghubungkan pembaca ke artikel lain yang masih satu topik seperti cara membuat link HTML, anatomi halaman web, atau pembahasan HTML lainnya.
Struktur internal link yang masuk akal juga membantu pembaca menemukan artikel terkait tanpa harus kembali ke halaman utama.
Kapan Sebaiknya Menggunakan Relative URL?
Relative URL cocok ketika kamu bekerja dengan banyak file yang berada dalam satu struktur website.
Misalnya:
<img src="images/logo.png" alt="Logo">
atau:
<script src="js/app.js"></script>
Keuntungannya adalah kode lebih pendek dan tidak perlu mengulang domain.
Untuk project HTML sederhana yang terdiri dari banyak file lokal, relative URL biasanya terasa jauh lebih nyaman.
Kapan Sebaiknya Menggunakan Absolute URL?
Absolute URL lebih cocok ketika alamat lengkap memang dibutuhkan.
Contohnya ketika mengarah ke website lain:
<a href="https://developer.mozilla.org/">MDN Web Docs</a>
Atau ketika sistem yang memproses URL membutuhkan alamat lengkap.
Absolute URL juga membuat tujuan terlihat jelas ketika kode dibaca tanpa konteks halaman asal.
Namun bukan berarti setiap link di website harus ditulis dengan domain lengkap. Untuk internal resource, pemilihan relative atau absolute sebaiknya disesuaikan dengan kebutuhan dan struktur project.
Cara Memilih Relative atau Absolute URL
Kalau masih bingung, gunakan aturan sederhana ini.
Gunakan relative URL ketika:
- Resource berada dalam struktur website/project yang sama.
- Kamu ingin path tetap ringkas.
- Struktur folder memang sudah jelas.
- Link tidak membutuhkan domain lengkap.
Gunakan absolute URL ketika:
- Mengarah ke website atau domain lain.
- Sistem membutuhkan URL lengkap.
- Kamu memang ingin alamat tujuan ditulis secara eksplisit.
- URL akan digunakan di luar konteks halaman asal.
Sedangkan untuk link internal dari root website, bentuk seperti:
<a href="/artikel-html.html">Artikel HTML</a>
sering terasa praktis karena tidak perlu menghitung berapa kali harus menggunakan ../.
Cara Memeriksa Relative URL yang Rusak
Kalau gambar, CSS, JavaScript, atau link tiba-tiba tidak bekerja, jangan langsung menyalahkan HTML-nya.
Periksa URL resource terlebih dahulu.
Misalnya:
<img src="../images/logo.png" alt="Logo">
Tanyakan:
- File HTML berada di folder mana?
- Folder
images berada di mana?
- Berapa tingkat folder yang harus dinaiki?
- Apakah nama file benar?
- Apakah huruf besar dan kecil sesuai?
- Apakah URL menggunakan
/, ./, atau ../ dengan benar?
Untuk project kecil, masalah path biasanya bisa ditemukan hanya dengan melihat struktur folder.
Untuk website yang lebih besar, browser developer tools juga sangat membantu karena resource yang gagal dimuat biasanya akan terlihat di tab Network atau Console.
Contoh Praktis dalam Satu Halaman
Misalnya halaman kita berada di:
https://example.com/blog/html/index.html
Kita ingin menuju beberapa resource.
<!-- Relative URL -->
<a href="dasar-html.html">Dasar HTML</a>
<!-- Parent-relative URL -->
<a href="../index.html">Blog</a>
<!-- Root-relative URL -->
<a href="/contact.html">Kontak</a>
<!-- Absolute URL -->
<a href="https://developer.mozilla.org/">MDN</a>
Empat link tersebut sama-sama valid, tetapi masing-masing memiliki cara berbeda dalam menentukan tujuan.
Kalau memahami titik awalnya, URL seperti ini sebenarnya tidak terlalu menyeramkan. Yang bikin pusing biasanya cuma satu: kita lupa sedang berdiri di folder mana.
Kesimpulan
Relative URL dan Absolute URL sama-sama penting dalam pengembangan website. Perbedaannya terletak pada cara alamat tujuan ditentukan.
Absolute URL menyertakan alamat lengkap seperti:
https://example.com/about.html
Sedangkan relative URL menggunakan lokasi halaman saat ini sebagai acuan, misalnya:
about.html
atau:
../about.html
Ada juga root-relative URL seperti:
/about.html
yang menunjuk dari root domain.
Kalau kamu baru belajar HTML, jangan cuma menghafal ./, ../, dan /. Coba biasakan melihat struktur foldernya. Begitu kamu tahu posisi halaman dan posisi file tujuan, relative URL akan terasa jauh lebih masuk akal.
Dan kalau sedang membangun website, selalu cek kembali link, gambar, CSS, dan JavaScript setelah memindahkan file atau mengubah struktur folder. Satu karakter / kadang bisa menjadi pembeda antara halaman yang rapi dan gambar yang tiba-tiba menghilang entah ke mana.
