HTML Link

Hypertext

HTML adalah singkatan dari HyperText Markup Language. Kata "Hypertext" yang artinya pada teks yang berfungsi sebagai tautan / reference ke teks lain. Untuk membuat tautan ini, kita menggunakan elemen <a> (singkatan dari Anchor atau jangkar).

Elemen ini memerlukan atribut paling penting, yaitu href (Hypertext Reference), yang menentukan alamat tujuan tautan tersebut.

1. Link ke Situs Lain (Tautan Eksternal)

URL eksternal digunakan untuk mengarahkan pengguna ke website yang berbeda (domain yang berbeda). Untuk melakukan ini, kamu harus menuliskan URL secara lengkap, termasuk protokolnya (http:// atau https://).

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

atau jika ingin, user membuka tab baru, ketika klik sebuah link

<a href="https://www.wikipedia.org" target="_blank" rel="noopener noreferrer">Buka Wikipedia di Tab Baru</a>

Catatan

noopener

Mencegah halaman yang dibuka (tab baru) mengakses window.opener. Ini penting untuk keamanan agar halaman tujuan tidak bisa memanipulasi atau mengarahkan kembali halaman asal (mencegah tabnabbing).

noreferrer

Mencegah browser mengirim informasi asal halaman (HTTP referrer) ke halaman tujuan. Jadi situs yang dibuka tidak tahu dari halaman mana pengunjung berasal.

2. Link ke Halaman Lain dalam Situs yang Sama (Navigasi Internal)

Navigasi internal adalah cara kita menghubungkan berbagai halaman di dalam satu proyek web (misalnya dari index.html ke contact.html). Di sini, kita menggunakan Relative Path (jalur relatif) alih-alih URL lengkap.

<a href="about.html">Tentang Kami</a>
<a href="contact.html">Hubungi Kami</a>

3. Link ke Bagian Tertentu (Fragment Identifier)

Selain pindah halaman, kamu juga bisa membuat tautan ke bagian tertentu di halaman yang sama menggunakan atribut id. Ini sering disebut sebagai "Jump Link".

<h2 id="konten-tengah">Bagian Tengah</h2>
<a href="#konten-tengah">Lompat ke Tengah</a>

Contoh

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Situs Saya</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Berkamu</a></li>
            <li><a href="produk.html">Produk Kami</a></li>
            <li><a href="https://www.youtube.com/" target="_blank" rel="noopener noreferrer">Subscribe</a></li>
        </ul>
    </nav>

    <h1>Selamat Datang</h1>
    <p>Silakan buka <a href="produk.html">katalog produk</a> kami untuk melihat penawaran terbaru.</p>
</body>
</html>