Link (anchor) merupakan elemen yang menghubungkan halaman web ke halaman yang lain. Link memungkinkan pengguna untuk pindah ke halaman lain atau menuju konten atau bagian tertentu di halaman yang sama. Artikel ini akan membahas bagaimana penggunaan link pada halaman web.
Elemen link dapat dibuat dengan menggunakan tag pembuka <a> dan diakhiri tag penutup </a>. Teks atau pesan yang akan muncul pada link diletakkan diantara kedua tag tersebut. Penggunaan sederhana dari link dapat dilihat pada contoh kode berikut :
<p>Silahkan klik <a href="http://google.com">disini</a><p>Output :
|
Silahkan klik disini |
Secara default, teks link akan berwarna biru dan memiliki style underlined atau terdapat garis dibawah teks. Style pada link dapat dimodifikasi menggunakan CSS. Pada contoh kode HTML diatas, teks "disini" merupakan sebuah link yang mana jika di-klik maka akan menuju ke alamat http://google.com. Alamat tujuan atau lokasi tujuan dapat ditentukan menggunakan atribut href dari elemen <a>. Berhati-hatilah untuk selalu memperhatikan tag penutup dari elemen link (</a>). Jika anda lupa menyertakan penutup dari sebuah link, maka mulai dari tag pembuka sampai akhir halaman web akan dianggap sebagai sebuah link.
Link Ke Bagian Dari Halaman Yang Sama
Pada contoh sebelumnya, kita telah membuat sebuah link yang akan menuju ke halaman yang lain. Pada HTML, link tidak hanya dapat digunakan untuk menghubungkan halaman web namun juga dapat digunakan untuk menuju langsung ke bagian tertentu dari halaman yang sama. Untuk membuat link untuk menuju ke bagian tertentu dari sebuah halaman, kita harus menyiapkan dua buah link. Link pertama digunakan sebagai link yang akan di-klik oleh pengguna, dan link kedua digunakan sebagai penanda atau tujuan dari link pertama.
<!doctype html>
<html>
<head>
<title>Link</title>
</head>
<body>
<p>Daftar Menu :</p>
<ul>
<li><a href="#pembuka">Pembukaan</a></li>
<li><a href="#isi">Isi</a></li>
<li><a href="#penutup">Penutup</a></li>
<!-- asumsikan konten lain disini -->
<h3><a name="pembuka">Pembukaan</a></h3>
<p>.............. <!-- asumsikan konten pembukaan disini --></p>
<h3><a name="isi">Inti Masalah</a></h3>
<p>.............. <!-- asumsikan konten isi disini --></p>
<h3><a name="penutup">Penutup</a></h3>
<p>.............. <!-- asumsikan konten penutup disini --></p>
</ul>
</body>
</html>
Pada contoh kode diatas dapat dilihat, tanda "#" pada atribut href menandakan bahwa link ini digunakan untuk menuju ke link tertentu yang berada di halaman yang sama. Tujuan dari link asal ditentukan dari nama link tujuan. Jadi secara sederhana <a href="#pembuka"> akan menuju ke link yang memiliki nama "pembuka" <a name="pembuka">. Link ini sangat berguna untuk memudahkan pengguna mengakses bagian tertentu dari sebuah halaman jika konten dari halaman tersebut cukup panjang.
Target
Selain atribut href, elemen <a> atau link memiliki atribut lain yang cukup sering digunakan yaitu target. Atribut target menentukan bagaimana link akan dibuka oleh browser seperti dibuka pada halaman yang sama, dibuka di tab baru, dan lain sebagainya. Berikut adalah daftar nilai dari atribut target :
| Nilai | Keterangan |
| _blank | Membuka link pada window atau tab baru. |
| _self | Membuka link pada window atau frame dimana link berada, halaman baru akan menimpa halaman asal. |
| _parent | Membuka link pada frame parent (digunakan jika link terdapat pada frame dibawah window atau frame lain). |
| _top | Membuka link pada full body dari window browser. |
| [nama_frame] | Membuka link pada frame yang memiliki nama sesuai dengan yang disebutkan di atribut target. |
contoh penggunaan atribut target :
<p>Klik <a href="http://google.com" target="_blank">buka tab</a></p>
<p>Klik <a href="http://google.com" target="framesaya">buka di frame</a></p>
<p><iframe name="framesaya" src="/" width="100" height="100"></iframe></p>
Rel
Atribut lainnya dari elemen <a> yang tidak kalah menarik adalah atribut rel. Atribut ini memberitahu browser hubungan antara halaman sumber dengan halaman tujuan. Sangat berguna untuk membantu performa indeksing halaman pada search engine. Adapun nilai - nilai dari elemen rel yaitu :
| Nilai | Keterangan |
|---|---|
| alternate | Menyediakan link ke representasi alternatif dari dokumen (yaitu halaman cetak, diterjemahkan atau cermin) |
| author | Menyediakan tautan ke penulis dokumen jika penulis memiliki halaman sendiri. |
| bookmark | URL permanen yang digunakan untuk bookmark. |
| external | Menunjukkan bahwa dokumen yang dirujuk bukan bagian dari situs yang sama dengan dokumen saat ini |
| help | Menyediakan tautan ke dokumen bantuan |
| license | Menyediakan tautan ke informasi lisensi untuk dokumen |
| next | Menyediakan tautan ke dokumen berikutnya dalam seri |
| nofollow | Tautan ke dokumen yang tidak didukung, seperti tautan berbayar. ("nofollow" digunakan oleh Google, untuk menentukan bahwa spider pencarian Google tidak boleh mengikuti tautan itu) |
| noopener | Mengharuskan konteks penelusuran apa pun yang dibuat dengan mengikuti hyperlink tidak boleh memiliki konteks penelusuran pembuka |
| noreferrer | Membuat perujuk tidak dikenal. Tidak ada tajuk rujukan yang akan disertakan saat pengguna mengklik hyperlink |
| prev | Dokumen sebelumnya dalam pilihan |
| search | Tautan ke alat pencarian untuk dokumen |
| tag | Sebuah tag (kata kunci) untuk dokumen saat ini |
Sumber : https://www.w3schools.com/tags/att_a_rel.asp
Contoh penggunaan atribut rel :
<a href="https://www.w3schools.com/tags/att_a_rel.asp" target="_blank" rel="noopener">https://www.w3schools.com/tags/att_a_rel.asp</a>
Hreflang
Atribut terakhir yang layak untuk dibahas adalah atribut hreflang. Atribut ini memberitahukan browser bahasa dari halaman yang dituju. Sehingga browser, plugin dan search engine dapat melakukan aksi tertentu seperti menyediakan layanan translate dan sebagainya.
<a href="http://google.com" hreflang="en">Google</a>
Baiklah, sekian dulu artikel kali ini mengenai link pada halaman HTML menggunakan <a>, sebenarnya masih ada beberapa atribut lain yang dimiliki oleh tag <a> yang memiliki fungsi - fungsi spesifik namun tidak kita bahas disini dikarenakan fungsinya tidak umum dan hanya berfungsi pada kondisi tertentu. Sekian artikel kali ini, semoga bermanfaat, stay tuned.. 😄
