Mengenal URL

URL dan Kaitannya dengan HTML

Apa itu URL

URL (Uniform Resource Locator) adalah alamat unik yang digunakan untuk menunjukkan lokasi suatu resource di internet dan cara mengaksesnya.

Contoh URL: https://www.example.com/path?search=test#section1

Secara umum, URL terdiri dari:

Protocol → cara akses resource (http, https, ftp)
Domain → alamat server (example.com)
Path → lokasi resource di server (/path)
Query → parameter tambahan (?search=test)
Fragment → bagian tertentu di dalam halaman (#section1)

Tanpa URL, browser tidak mengetahui ke mana dan bagaimana mengambil suatu resource.

Hubungan URL dengan Tag `<a>` HTML

Tag <a> (anchor) digunakan untuk membuat hyperlink, yaitu penghubung antar halaman atau resource.

Contoh penggunaan:

<a href="https://www.example.com">Kunjungi Website</a>

Saat link diklik:

Browser membaca URL di atribut href
Browser menggunakan protocol yang ada di URL
Resource diminta ke server dan ditampilkan

Jenis URL yang Umum Digunakan pada Tag

Absolute URL

<a href="https://google.com">Google</a>

Relative URL

<a href="/about.html">About</a>

Relative URL adalah URL yang ditentukan berdasarkan lokasi file HTML saat ini. Contoh struktur:

/public
 ├── index.html
 ├── about.html
 └── blog/
     └── post.html

Tanpa Slash di Awal

<a href="about.html">About</a>

Browser mencari about.html di folder yang sama dengan file saat ini

Dengan Slash di Awal (/)

<a href="/about.html">About</a>

Artinya:

Slash / di awal berarti root website (document root). Browser mengabaikan folder saat ini. Jika domain: https://www.example.com, maka tujuannya menjadi https://www.example.com/about.html

URL Menggunakan ../

../ berarti naik satu folder. Jika berada di:

/public/blog/post.html

Maka tujuan:

/public/about.html

URL Menggunakan ./

<a href="./about.html">About</a>

Artinya: ./ berarti folder saat ini Umumnya bersifat eksplisit dan sering dihilangkan

Fragment URL

<a href="#contact">Ke Kontak</a>

Digunakan untuk menuju bagian tertentu di halaman yang sama.

Protocol Khusus

<a href="mailto:admin@example.com">Email</a>
<a href="tel:+628123456789">Telepon</a>

Mengenal URL

On this page