HTML Link

HTML Dasar: Links (Tautan)

Apa Itu Link dalam HTML?

Link (tautan) dalam HTML digunakan untuk menghubungkan satu halaman ke halaman lain, baik di dalam situs yang sama maupun ke situs lain di internet. HTML menggunakan elemen <a> (anchor) untuk membuat hyperlink.

Struktur Dasar Tag `<a>`

<a href="alamat_tujuan">Teks yang diklik</a>

Keterangan:

href: atribut yang berisi URL atau alamat tujuan dari tautan.
Teks yang diklik: teks yang muncul di halaman dan bisa diklik oleh pengguna.

Jenis-Jenis Tautan

1. Tautan ke Halaman Web Lain

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

2. Tautan ke Halaman Lain dalam Situs

<a href="tentang.html">Tentang Kami</a>

3. Tautan ke Bagian dalam Halaman yang Sama

Pertama, beri elemen target id:

<h2 id="kontak">Hubungi Kami</h2>

Kemudian, buat tautan menuju ke bagian tersebut:

<a href="#kontak">Langsung ke bagian Kontak</a>

4. Tautan ke Email

<a href="mailto:info@example.com">Kirim Email</a>

5. Tautan ke Nomor Telepon

<a href="tel:+6281234567890">Hubungi Kami</a>

Atribut Tambahan yang Sering Digunakan

Atribut	Fungsi
`target="_blank"`	Membuka link di tab atau jendela baru
`title`	Menampilkan info tambahan saat kursor diarahkan ke tautan
`download`	Mengunduh file saat link diklik (bukan membuka halaman)

Contoh:

<a href="file.pdf" download>Unduh PDF</a>
<a href="https://kuliahcoding.com" target="_blank" title="Kunjungi Kuliah Coding">OpenAI</a>

Contoh Kode HTML Lengkap

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Tautan HTML</title>
</head>
<body>

  <h1>Belajar HTML: Link (Tautan)</h1>

  <!-- Tautan ke website lain -->
  <p><a href="https://www.wikipedia.org" target="_blank">Kunjungi Wikipedia</a></p>

  <!-- Tautan ke halaman lain dalam situs -->
  <p><a href="profil.html">Lihat Profil Kami</a></p>

  <!-- Tautan ke bagian tertentu dalam halaman -->
  <p><a href="#kontak">Langsung ke bagian kontak</a></p>

  <!-- Tautan ke email -->
  <p><a href="mailto:info@example.com">Kirim Email</a></p>

  <!-- Tautan ke nomor telepon -->
  <p><a href="tel:+6281234567890">Hubungi via Telepon</a></p>

  <!-- Bagian kontak -->
  <h2 id="kontak">Kontak Kami</h2>
  <p>Email: info@example.com</p>

</body>
</html>

Tips Penting

Gunakan target="_blank" dengan bijak agar tidak membingungkan pengguna.
Pastikan semua link berfungsi dan tidak rusak (404 Not Found).
Hindari menggunakan tautan dengan teks seperti “Klik di sini”. Gunakan deskripsi yang jelas, contoh: “Pelajari Lebih Lanjut Tentang Produk Kami”.

Kesimpulan

HTML menggunakan tag <a> untuk membuat tautan (link).
Tautan bisa menuju halaman lain, email, bagian halaman, atau file.
Gunakan atribut seperti href, target, title, dan download untuk kontrol lebih baik.