Absolute dan Relative URL

Chapter sebelumnya memakai dua jenis alamat pada href tanpa kita bedah: nama file pendek seperti katalog.html dan URL panjang berawalan https. Penulisan alamat menentukan apakah link tetap bekerja ketika folder dipindah atau diunggah ke server lain. Pada Chapter ini kita memotong URL menjadi komponen-komponennya, membandingkan absolute URL dengan relative URL, mempelajari pola path untuk masuk dan naik folder, lalu menetapkan kapan masing-masing bentuk layak dipakai.

Anatomi Sebuah URL #

URL (Uniform Resource Locator) adalah alamat yang menyebutkan letak suatu resource beserta cara membukanya. Format URL diatur oleh WHATWG dalam dokumen yang kita rujuk sebagai URL Standard. Mari kita potong sebuah URL sungguhan menjadi bagian-bagian utamanya — contoh di bawah adalah halaman referensi HTML pada MDN Web Docs:

Query dan fragment bersifat opsional. Query dipakai untuk mengirim data, misalnya kata kunci pencarian, sedangkan fragment menunjuk bagian tertentu dari sebuah halaman — pembahasannya kita geser ke Chapter Navigasi Internal.

Absolute URL #

Absolute URL menuliskan alamat secara lengkap, dimulai dari scheme dan domain. Karena alamatnya lengkap, absolute URL dapat ditulis di halaman mana pun di internet dan tetap menunjuk tujuan yang sama. Bentuk ini wajib kita pakai ketika tujuan berada di luar situs sendiri:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Referensi HTML di MDN Web Docs</a>

Tidak ada bagian alamat yang dihitung dari halaman asal: scheme dan domain membawa browser langsung ke server tujuan, lalu path menentukan lokasi resource di dalamnya.

Relative URL #

Relative URL menuliskan letak resource relatif terhadap halaman yang sedang membuka link. Browser menggabungkan path tersebut dengan alamat halaman saat ini untuk menghitung URL lengkapnya. Empat pola berikut mencakup hampir semua kebutuhan kita; asumsinya, halaman yang menulis link berada di akar folder situs:

Penulisan yang diawali garis miring disebut root-relative: browser memulai dari akar domain, bukan dari folder halaman. Bentuk ini tepat dipakai ketika halaman disajikan melalui server. Pada pembukaan file langsung lewat protokol file:// — mode latihan awal course ini — garis miring dihitung dari akar sistem file, sehingga tujuan link meleset.

Kapan Memakai yang Mana #

Pemilihan jenis URL dapat dirangkum menjadi tiga keputusan sederhana:

• Link ke situs lain: absolute URL, karena hanya alamat lengkap yang mampu menggambarkan domain berbeda.
• Link antarhalaman dalam situs sendiri: relative URL, sehingga situs tetap berfungsi ketika folder proyek dipindah ke server lain.
• Aset bersama seperti style sheet yang letaknya tetap dari akar situs: root-relative, bila situs memang berjalan di server.

Kaidah terakhir ini sering diabaikan pemula. Situs yang seluruh linknya relative dapat dipindah dari folder latihan ke hosting tanpa satu pun perbaikan kode, sedangkan absolute URL yang menuliskan domain latihan harus dirombak saat domain berubah.

Contoh Lengkap dalam Satu File #

Susunan folder berikut menjadi panggung latihan kita. File contoh berperan sebagai produk/index.html, satu tingkat di bawah akar folder, sehingga keempat pola path dapat diuji sekaligus:

situs-budi/
├── index.html
├── tentang.html
├── kontak.html
└── produk/
    └── index.html   ← posisi file contoh di bawah

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Produk</title>
</head>
<body>
  <h1>Katalog Produk</h1>
  <ul>
    <li><a href="detail.html">Detail produk</a> — file sefolder</li>
    <li><a href="../tentang.html">Tentang</a> — naik satu folder</li>
    <li><a href="/kontak.html">Kontak</a> — mulai dari akar situs</li>
    <li><a href="https://developer.mozilla.org/">Referensi eksternal</a> — absolute URL</li>
  </ul>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan judul "Katalog Produk" dan daftar empat link;
masing-masing link membawa jenis alamat yang berbeda sebagaimana catatan
pada teks di sampingnya.

Mari kita telaah keempat link tersebut:

1. Baris 11 (detail.html): browser menghitung tujuan relatif terhadap folder produk, sehingga hasilnya produk/detail.html.
2. Baris 12 (../tentang.html): pola ../ menaikkan pembacaan satu tingkat ke akar folder, lalu menuju tentang.html.
3. Baris 13 (/kontak.html): garis miring awal memulai dari akar domain; bentuk ini dihitung dari akar sistem file bila halaman dibuka lewat file://.
4. Baris 14 (URL MDN): alamat lengkap dengan scheme dan domain; penunjukan tidak bergantung pada letak halaman asal sama sekali.

Dengan anatomi URL ini, kita mampu menulis alamat yang tepat untuk setiap situasi. Chapter berikutnya memakai komponen terakhir pada tabel di atas — fragment — untuk melompat ke bagian tertentu dalam satu halaman.

Referensi resmi untuk pendalaman:

• WHATWG — URL Standard
• MDN Web Docs — Creating links
• WHATWG — HTML Living Standard: Hyperlink

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katalog Produk</title>
</head>
<body>
  <h1>Katalog Produk</h1>
  <ul>
    <li><a href="detail.html">Detail produk</a> — file sefolder</li>
    <li><a href="../tentang.html">Tentang</a> — naik satu folder</li>
    <li><a href="/kontak.html">Kontak</a> — mulai dari akar situs</li>
    <li><a href="https://developer.mozilla.org/">Referensi eksternal</a> — absolute URL</li>
  </ul>
</body>
</html>