Link HTML

Link merupakan salah satu elemen penting yang perlu kita palajari dalam HTML, ini dapat memudahkan pengunjung menavigasi dan beralih antar halaman.

Bayangkan jika semua situs web yang ada di internet tidak memiliki link.

Kita sebagai pengunjung tentunya harus mengetik url secara manual.

Misalnya, ketika kita ingin membukan daftar materi HTML di Kodealgo, maka kita harus mengetik alamat berikut di bilah browser:

https://kodealgo.com/html/

Kemudian jika kita ingin beralih ke halaman lain, misalnya JavaScript, kita harus mengetik lagi url halaman tersebut:

https://kodealgo.com/javascript/

Ribet kan?

Itulah mengapa kita perlu link.

Dengan menggunakan link, pengunjung dapat menvagiasi dan beralih antar halaman dengan mudah tanpa harus mengetik alamatnya secara manual.

Mari kita pelajari lebih lanjut.

Tapi sebelum itu, silahkan buat sebuah folder dan buat tiga file HTML (index.html, about, dan contact) di dalam folder tersebut.

Pastikan ketiga file tersebut memiliki struktur dasar HTML dan memiliki judul <h1> dan <title> yang berbeda.

Anda dapat menulis kode HTML yang saya tulis di dibawah di dalam index.html.

Struktur direktori kita akan terlihat seperti berikut:

belajar-html
├── index.html
├── about.html
└── contact.html

Mari kita mulai.

Apa Itu Link?
Cara Membuat Link HTML
Jenis Link
Jenis URL
Atribut Link
Link yang Bisa Melompat
Mengubah Gaya Link
Link Kirim Email
Link dengan Gambar
Link Download File
Panggil Fungsi JavaScript dengan Link

Apa Itu Link?

Link atau tautan adalah elemen HTML yang digunakan untuk menghubungkan antar halaman web.

Ketika diklik, pengunjung akan diarahkan ke halaman yang sesuai dengan alamat yang ditentukan pada atribut href.

Selain halaman web, elemen ini juga bisa digunakan untuk mengunduh file, mengirim email, mengeksekusi fungsi JavaScript dan sebagainya.

Cara Membuat Link HTML

Untuk membuat link di HTML, kita bisa menggunakan tag <a> dan atribut href untuk menentukan kemana pengunjung akan diarahkan ketika link diklik.

Kita dapat menyisipkan teks diantara tag pembuka dan penutup. Teks inilah yang dilihat dan diklik oleh pengguna.

Contoh:

<a href="contact.html">Contact</a>

Hasil:

Jenis Link

Beradasarkan alamat URL yang dituju, ada dua jenis link di HTML:

Internal Link: link yang mengarah ke situs web atau domain yang sama.
Eksternal Link: link yang mengarah ke situs web atau domain yang berbeda.

Secara umum perilakunya sama saja. Tapi, kita perlu tahu istilah ini karena sering digunakan.

Contoh internal link di Kodealgo:

<a href="https://kodealgo.com/html/">HTML</a>

Perhatikan contoh di atas, anggap saja link tersebut ditulis di Kodealgo.

Karena link di atas mengarahkan kita ke situs web yang sama maka ini disebut internal link. Contoh sebelumnya juga termasuk.

Kadang nama domain tidak ditulis secara eksplisit di dalam atribut href, menggunakan URL relatif, ini akan kita bahas di bawah.

Intinya, selama link tersebut mengarahkan kita ke situs web yang sama, maka itu disebut internal link.

Contoh eksternal link di Kodealgo:

<a href="https://facebook.com/kodealgo/">Facebook Kodealgo</a>

Perhatikan contoh link di atas, anggap saja link tersebut ditulis di Kodealgo, maka ini adalah eksternal link karena mengarahkan kita ke situs web yang berbeda.

Dari Kodealgo diarahkan ke Facebook.

Jenis URL

Kalau yang sebelumnya didasarkan pada tujuan URL, kalau yang ini menentukan bagaimana cara kita menulis URL.

Ada dua jenis URL yang bisa kita tulis di dalam atribut href:

Absolut: URL ditulis lengkap.
Relatif: URL ditulis sebagian.

Contoh URL absolut:

<a href="https://kodealgo.com/html/">HTML</a>

Contoh di atas menggunakan URL absolut karena ditulis secara lengkap, tidak peduli apakah diarahkan ke domain yang sama atau berbeda.

URL absolut biasanya digunakan ketika kita membuat eksternal link.

Contoh URL relatif:

<a href="/html/">Contact</a>

Contoh diatas ditulis menggunakan URL relatif, karena kita tidak menulis URL lengkap. URL relatif biasanya digunakan ketika kita membuat internal link.

Mari kita gunakan contoh di lokal (tanpa domain):

<!-- Absolut -->
<a href="C:\Users\Reza\belajar-html\contact.html">Absolut Contact</a>

<!-- Relatif -->
<a href="contact.html">Relatif Contact</a>

Hasil:

Link di atas menggunakan URL absolut dan relatif, tapi mengarahkan kita ke "situs web" yang sama (internal link).

Bagian C:\Users\Reza\belajar-html\ mungkin akan berbeda, tergantung dimana Anda menyimpan file HTML.

Untuk menyalin path atau bagian tersebut, kalau Anda menggunakan Visual Studio Code, klik kanan pada file contact.html lalu pilih opsi "Copy Path".

Atribut Link

Sama seperti elemen yang lainnya, tag <a> mendukung semua atribut global seperti style dan yang lainnya.

Tapi tag ini memiliki atribut khusus.

Mari kita pelajari beberapa atribut yang paling sering digunakan.

Atribut `href`

Atribut href umunya digunakan untuk menyisipkan URL berbasis HTTP.

Tapi, sebetulnya kita juga bisa menggunakan skema URL apa pun yang didukung oleh browser, diantaranya:

URL HTTP, contoh href="https://kodealgo.com".
mail: untuk mengirim email, contoh href="mail:anu@contoh.com".
tel: untuk telpon, contoh href="tel:+6285789123".

Atribut `target`

Atribut target menentukan tempat untuk membuka dokumen yang ditentukan di href.

Berikut daftar nilai target yang bisa kita gunakan:

_self: tab saat ini (default).
_blank: tab baru.
_parent: frame induk.
_top: jendela paling atas.
namaFrame: iframe bernama.

Sekilas, sebagian besar niali rel memiliki perilaku yang sama karena di sini kita membukanya dalam konteks tab browser.

Perbedaan perilakunya akan terlihat jelas ketika kita menggunakan <iframe> dan jendela.

Jika Anda ingin membuka halaman web di tab saat ini, tidak perlu menulis _self secara manual, karena ini adalah nilai default dari atribut target, sudah dipasangkan secara otomatis.

Yang perlu kita ketahui saat ini, cukup _blank saja, sisanya jarang digunakan.

Mari kita coba satu per satu.

Contoh:

<a href="contact.html" target="_self">_self</a>
<a href="contact.html" target="_blank">_blank</a>
<a href="contact.html" target="_parent">_parent</a>
<a href="contact.html" target="_top">_top</a>

<a href="https://example.com" target="myFrame">myFrame</a>
<iframe name="myFrame" width="500" height="300"></iframe>

Hasil:

Contoh diatas kita menggunakan situs example.com untuk dibuka di dalam <iframe>. Tidak semua situs bisa dibuka menggunakan metode ini.

Situs-situs yang menjaga keamanannya biasanya mencegah ini dengan menambahkan Header X-Frame-Options: DENY.

Termasuk YoutTube, Google, Facebook, dan tentu saja Kodealgo. Tujuannya untuk mencegah serangan click jacking.

Atribut `rel`

rel merupakan salah satu atribut link yang juga perlu kita ketahui, terutama kalau berbicara soal SEO.

Sebetulnya ada banyak nilai rel yang bisa kita gunakan, untuk saat ini mari kita bahas tiga yang paling sering digunakan, yaitu:

nofollow
noopener
noreferrer

Gunakan nofollow ketika Anda tidak mempercayai situs yang ditautkan atau ditentukan di dalam nilai href, ini digunakan oleh mesin pencari untuk menentukan peringkat.

Jika Anda menautkan ke situs-situs besar seperti Facebook, YouTube atau yang lainnya, selama itu relevan dan Anda mempercayai situs tersebut, tidak perlu menggunakan atribut ini.

noopener menginstruksikan browser untuk membuka tautan tanpa memberikan akses konteks penelusuran ke dokumen yang membukanya, properti Window.opener menjadi null.

noreferrer menginstruksikan browser untuk menghilangkan header Referer sehingga informasi perujuk tidak bisa diketahui oleh pemilik situs yang dituju.

Jadi, kapan harus menggunakan atribut ini?

Singkatnya, gunakan atribut noopener dan noreferrer, ketika Anda membuat link eksternal yang merujuk ke situs lain. Tambahkan nofollow jika Anda tidak mempercayai situs yang dituju.

Jangan gunakan atribut ini untuk internal link.

Contoh:

<a href="https://example.com" rel="nofollow noopener noreferrer">Example</a>
<a href="https://facebook.com" rel="noopener noreferrer">Facebook</a>

Atribut `title`

Atribut title di dalam tag <a> sebetulnya jarang digunakan karena biasanya teks yang ditulis diantara tag pembuka dan penutup sudah cukup untuk mendeskripsikan tautan.

Tapi, jika dirasa perlu menambahkan judul atau deskripsi, Anda bisa menggunaka atribut title.

Teks di dalam title akan muncul ketika kursor berada tepat diatas link.

Contoh:

<a href="https://facebook.com/kodealgo" title="Facebook Kodealgo">Facebook</a>

Hasil:

Link yang Bisa Melompat

Nilai atribut href tidak hanya bisa kita isi dengan skema URL HTTP, kita juga bisa menyisipkan tanda pagar untuk membuat link yang dapat melompat (skip) dan membawa kita ke bagian tertentu di halaman yang sama.

Link seperti ini biasanya digunakan untuk daftar isi.

Kita perlu mengisi nilai href dengan tanda pagar (#) diikuti dengan id elemen yang dituju.

Contoh:

<a href="#jenis-url">Jenis Url</a>

<h2 id="jenis-url">Jenis URL</h2>

Hasil:

Mengubah Gaya Link

Karena tag <a> mendukung atribut global termasuk style, kita bisa menyisipkan CSS ke dalam atribut tersebut untuk menyesuaikan gaya tautan.

Misalnya mengubah warna teks, warna latar belakang, atau menghapus grais bawah.

Contoh:

<a href="https://kodealgo.com" style="color: palevioletred">Kodealgo</a>
<a href="https://kodealgo.com" style="background-color: aquamarine">Kodealgo</a>
<a href="https://kodealgo.com" style="text-decoration: none">Kodealgo</a>

Hasil:

Link Kirim Email

Kita juga bisa membuat link untuk mengirim email.

Ketika link diklik, otomatis akan membuka aplikasi email klien default di perangkat yang kita gunakan. Kalau di Windows biasanya Outlook.

Untuk membuatnya, kita hanya perlu menulis skema mailto: diikuti dengan nama email yang dituju. Email ini nantinya akan secara otomatis masuk ke kolom "To" di email klien.

Contoh:

<a href="mailto:anu@contoh.com">Email</a>

Hasil:

Link dengan Gambar

Kita bisa menyisipkan elemen apa pun diantara tag pembuka dan penutup <a>, tak terkecuali gambar.

Ini biasanya digunakan untuk logo situs, dimana ketika gambar logo diklik maka akan diarahkan ke halaman depan situs kita.

Contoh:

<a href="https://kodealgo.com">
  <img src="kodealgo.png" alt="Kodealgo" />
</a>

Hasil:

Link Download File

Tag <a> juga bisa kita gunakan untuk menyediakan file yang dapat diunduh pengguna.

Tapi, ini tidak berlaku untuk video dan gambar, karena ini akan ditampilkan secara langsung di browser.

Masalah ini bisa kita atasi dengan menambahkan atribut download dengan nilai nama file yang ingin kita gunkaan, jadi nama file yang diunduh pengguna bisa dibedakan dengan nama file asli.

Tapi, ini hanya bekerja jika kita menjalankannya di server, Anda bisa mencobanya menggunakan ekstensi Live Server di Visual Studio Code.

Contoh:

<a href="google-chrome.zip" download="chrome">google-chrome.zip</a>

Kalau kita menjalankannya di server, maka nama file yang diunduh akan menggunkaan nama yang ada di dalam atribut download, dalam hal ini chrome.

Tapi karena di sini saya menjalankannya tanpa server, ini tidak bekerja.

Hasil:

Panggil Fungsi JavaScript dengan Link

Memanggil fungsi JavaScript menggunakan link bukanlah parktik yang baik, sebaiknya dipisahkan dengan HTML.

Tapi kita perlu tau bahwa ini bisa kita lakukan.

Kita bisa memanggil fungsi JavaScript di dalam atribut event seperpti onclick, atau langsung di dalam atribut href.

Kalau menggunakan href, pastikan kode JavaScript diawalii dengan javascript:.

Contoh:

<a href="javascript:alert('Hi, Kodealgo')">Sapa</a>

Hasil:

Apa Itu Link?

Cara Membuat Link HTML

Jenis Link

Jenis URL

Atribut Link

Atribut href

Atribut target

Atribut rel

Atribut title

Link yang Bisa Melompat

Mengubah Gaya Link

Link Kirim Email

Link dengan Gambar

Link Download File

Panggil Fungsi JavaScript dengan Link

Atribut `href`

Atribut `target`

Atribut `rel`

Atribut `title`