Panduan Lengkap Belajar Relative URL dan Absolute URL

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.

Relative URL dan Absolute URL

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:

  1. File HTML berada di folder mana?
  2. Folder images berada di mana?
  3. Berapa tingkat folder yang harus dinaiki?
  4. Apakah nama file benar?
  5. Apakah huruf besar dan kecil sesuai?
  6. 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.

Tidak ada komentar