Menentukan URL Basis Dokumen Dengan Elemen HTML

Situs web dibangun dengan serangkaian tautan, menunjuk ke halaman dan sumber-sumber seperti gambar dan lembar gaya. Ada dua cara untuk melakukannya tentukan URL yang menautkan ke sumber-sumber ini: baik menggunakan jalur absolut atau relatif.

Path absolut mengacu pada tujuan tertentu, biasanya dimulai dengan nama domain (bersama dengan HTTP) seperti www.domain.com/destination/source.jpg. Jalur relatif adalah sebaliknya: tujuan tautan tergantung pada lokasi root atau dalam kebanyakan kasus nama domain situs web Anda.

Jalur relatif tipikal akan terlihat seperti ini di bawah ini:

Jika domain situs web Anda, misalnya, hongkiat.com jalur gambar akan diselesaikan hongkiat.comimages_2 / menentukan-dokumen-basis-url-dengan-html-basis-element.png. Anda harus memahami ini jika Anda telah mengembangkan situs web untuk sementara waktu.

Tetapi kebanyakan dari Anda mungkin belum pernah mendengar tentang elemen. Tag HTML ini telah ada sejak HTML4, namun sangat sedikit terlihat dari implementasinya di alam liar. W3C menjelaskan elemen ini sebagai:

“Elemen dasar memungkinkan penulis untuk menentukan URL basis dokumen untuk keperluan penyelesaian URL relatif, dan nama konteks penelusuran default untuk keperluan hyperlink berikut.”

Ini elemen pada dasarnya memutuskan URL dasar untuk jalur relatif di halaman web. Alih-alih bergantung pada lokasi root atau domain situs web Anda, Anda dapat mengarahkannya ke tempat lain, mungkin seperti URL tempat sumber daya Anda berada di CDN (Content Delivery Network). Mari kita lihat bagaimana cara kerjanya.

Menggunakan Elemen Dasar

Itu didefinisikan di sepanjang sisi dan tag di dalam . Diberikan contoh berikut, kami menetapkan URL dasar ke Google.

Spesifikasi ini akan memengaruhi semua jalur di dalam dokumen, termasuk jalur yang ditentukan di dalam href atribut dan src dari gambar. Jadi, anggap kita memiliki stylesheet, gambar, dan tautan dalam kumpulan dokumen dengan jalur relatif seperti ini, misalnya:

  Anchor Link

Meskipun halaman web kami ada di bawah demo.hongkiat.com jalan relatif akan merujuk hongkiat.maxcdn.com, mengikuti jalur dasar yang ditentukan dalam menandai. Coba arahkan kursor ke atas tautan, dan peramban akan menunjukkan kepada Anda ke mana jalan itu menuju.

Semua jalur relatif pada akhirnya akan menjadi:

  Anchor Link

Menetapkan target Tautan Default

Selain mendefinisikan URL dasar, URL tag juga dapat menetapkan target tautan default melalui target atribut. Katakan Anda ingin semua tautan dalam dokumen dibuka di tab baru browser, mengatur target dengan _kosong, seperti itu.

Keterbatasan

Itu tag, bagaimanapun, memiliki beberapa peringatan dalam beberapa keadaan:

Pertama, dukungan browser sangat bagus; ini bekerja di IE6. Tapi, IE6 berpikir bahwa itu membutuhkan tag penutup . Ini dapat menyebabkan masalah hierarki dalam dokumen, jika tag penutup dibiarkan tidak ditentukan. Cara cepat dan mudah untuk mengatasi masalah ini adalah dengan menambahkan menutup dalam komentar, .

Jika Anda menggunakan # dalam hubungannya dengan untuk menautkan ke bagian dalam dokumen, Anda mungkin berpotensi mengalami masalah di Internet Explorer 9. Alih-alih melompat ke bagian yang dimaksud, Internet Explorer 9 akan memuat ulang halaman.

Selanjutnya kosong href akan menghasilkan URL dasar alih-alih menautkan ke direktori saat ini di mana halaman berada (ini adalah perilaku browser default), yang dapat menyebabkan masalah referensi yang tidak terduga.

Bungkus

Itu adalah fitur HTML praktis yang dapat menyederhanakan referensi tautan dalam dokumen web. Gunakan tag dengan baik untuk meminimalkan jebakan. Ikuti referensi di bawah ini untuk informasi lebih lanjut tentang menandai:

URL Mutlak dan Relatif - MSDN
Elemen Dasar HTML - W3C