Cara Membuat Link HTML: Panduan Lengkap untuk Pemula

Cara Membuat Link HTML sebenarnya cukup sederhana. Kamu hanya perlu mengenal elemen <a> dan atribut href untuk menentukan tujuan link. Dari sini, kamu sudah bisa membuat teks yang dapat diklik menuju halaman lain, website eksternal, file, alamat email, bahkan bagian tertentu dalam halaman yang sama.

Buat yang baru belajar HTML, link mungkin terlihat sepele. Tapi justru elemen inilah yang membuat halaman web saling terhubung. Tanpa link, konsep “web” yang kita kenal sekarang bakal terasa seperti kumpulan halaman yang berdiri sendiri.

Di artikel ini, kita akan membahas cara membuat link HTML dari yang paling dasar sampai beberapa penggunaan yang sering dipakai dalam website.

cara membuat link ke halaman lain dengan HTML
cara membuat link ke halaman lain dengan HTML

Apa Itu Link dalam HTML?

Link HTML atau hyperlink adalah elemen yang memungkinkan pengguna berpindah dari satu sumber ke sumber lainnya.

Dalam HTML, link biasanya dibuat menggunakan elemen <a> atau anchor element. Atribut href digunakan untuk menentukan URL atau tujuan yang akan dibuka ketika link diklik.

Struktur dasarnya seperti ini:

<a href="https://example.com">Kunjungi Example</a>

Hasilnya akan menjadi link:

Kunjungi Example

Bagian-bagiannya cukup mudah dipahami:

<a href="URL">Teks Link</a>
  • <a> adalah elemen anchor.
  • href menentukan alamat tujuan.
  • URL adalah alamat yang ingin dituju.
  • Teks Link adalah tulisan yang dilihat dan diklik pengguna.
  • </a> menandai akhir elemen link.

Menurut HTML Standard, elemen <a> dengan atribut href memang merepresentasikan sebuah hyperlink. Tanpa href, elemen tersebut tidak membuat hyperlink.

Cara Membuat Link HTML ke Website Lain

Jenis link yang paling sering dibuat adalah link menuju website lain.

Misalnya, kita ingin membuat link menuju MDN:

<a href="https://developer.mozilla.org/">
  Belajar HTML di MDN
</a>

Karena URL ditulis lengkap dengan https://, ini disebut absolute URL.

Contoh lainnya:

<a href="https://www.google.com/">Google</a>
<a href="https://www.wikipedia.org/">Wikipedia</a>
<a href="https://example.com/">Website Contoh</a>

Format seperti ini cocok ketika tujuan link berada di website berbeda.

Cara Membuat Link HTML ke Halaman Lain

Kalau kamu membuat website yang terdiri dari beberapa halaman HTML, kamu juga bisa menggunakan relative URL.

Misalnya struktur foldernya:

website/
├── index.html
├── about.html
└── contact.html

Dari index.html, kamu bisa membuat link ke halaman About:

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

Sedangkan untuk menuju halaman Contact:

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

Relative URL menggunakan lokasi file saat ini sebagai acuan. Karena itu, penulisan path perlu diperhatikan ketika file berada di folder yang berbeda. MDN juga membedakan penggunaan absolute URL dan relative URL dalam pembuatan link HTML.

Link ke File dalam Folder

Misalnya struktur website berubah menjadi:

website/
├── index.html
└── pages/
    └── about.html

Maka link dari index.html bisa dibuat seperti ini:

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

Kalau ingin kembali ke folder sebelumnya menggunakan ..:

<a href="../index.html">Kembali ke Beranda</a>

Konsep ./ dan ../ akan sangat berguna ketika website mulai memiliki banyak halaman dan folder.

Cara Membuka Link di Tab Baru

Kadang kita ingin pengguna tetap berada di halaman sekarang ketika membuka link tujuan.

Untuk itu, kamu bisa menggunakan:

<a href="https://example.com/" target="_blank">
  Buka Example
</a>

Atribut target="_blank" meminta browser membuka tujuan pada konteks browsing baru, yang pada browser modern biasanya berupa tab baru.

Untuk link eksternal, kamu juga bisa menambahkan rel sesuai kebutuhan:

<a
  href="https://example.com/"
  target="_blank"
  rel="noopener"
>
  Buka Example
</a>

Perlu dicatat, browser modern secara implisit memberikan perlindungan noopener ketika menggunakan target="_blank", tetapi menuliskannya secara eksplisit masih bisa membuat maksud kode lebih jelas.

Dan satu hal kecil yang sering dilupakan: kalau link membuka tab baru, sebaiknya teks link memberi tahu pengguna. Ini lebih ramah untuk aksesibilitas karena pengguna tidak tiba-tiba “dilempar” ke tab lain tanpa konteks.

Contohnya:

<a
  href="https://example.com/"
  target="_blank"
  rel="noopener"
>
  Example (buka di tab baru)
</a>

Cara Membuat Link ke Bagian Tertentu dalam Halaman

Ini salah satu fitur yang menurut saya paling berguna ketika membuat artikel panjang.

Kamu bisa membuat link yang langsung membawa pengguna ke bagian tertentu pada halaman.

Pertama, berikan id pada elemen tujuan:

<h2 id="contoh-link">
  Contoh Link HTML
</h2>

Kemudian buat link menuju ID tersebut:

<a href="#contoh-link">
  Lihat contoh link
</a>

Ketika link diklik, browser akan menuju elemen dengan id="contoh-link".

Teknik ini sering digunakan untuk membuat daftar isi atau navigasi dalam artikel panjang. HTML mendukung fragment identifier seperti #contoh-link untuk menunjuk bagian tertentu dari dokumen.

Yang penting, nilai setelah # harus sesuai dengan id tujuan.

<a href="#belajar-html">Belajar HTML</a>

<h2 id="belajar-html">Belajar HTML</h2>

Jangan sampai seperti ini:

<a href="#belajar-html">Belajar HTML</a>

<h2 id="belajarHTML">Belajar HTML</h2>

Karena targetnya berbeda.

Cara Membuat Link Email dengan HTML

HTML juga bisa digunakan untuk membuat link yang membuka aplikasi email pengguna.

Gunakan skema mailto::

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

Ketika diklik, perangkat pengguna dapat membuka aplikasi email yang terhubung dengan sistemnya.

Kamu juga bisa mengisi subjek email:

<a href="mailto:halo@example.com?subject=Pertanyaan">
  Hubungi Kami
</a>

Untuk kebutuhan yang lebih kompleks, URL mailto: dapat memiliki parameter tambahan, tetapi untuk penggunaan sederhana format di atas sudah cukup.

Cara Membuat Link Nomor Telepon

Untuk website yang dibuka melalui smartphone, link telepon juga cukup berguna.

Gunakan tel::

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

Saat pengguna mengetuknya dari perangkat yang mendukung panggilan, sistem dapat menawarkan untuk melakukan panggilan ke nomor tersebut.

Ini sangat berguna untuk website bisnis, toko online, jasa lokal, atau halaman kontak.

Cara Membuat Link Download File

HTML menyediakan atribut download untuk menyatakan bahwa link ditujukan untuk mengunduh sebuah resource.

Contohnya:

<a href="dokumen.pdf" download>
  Download PDF
</a>

Kamu juga bisa memberikan nama file yang disarankan:

<a href="dokumen.pdf" download="panduan-html.pdf">
  Download Panduan HTML
</a>

HTML Standard menjelaskan bahwa atribut download menunjukkan maksud author agar resource tersebut digunakan untuk proses download. Pada kondisi tertentu, terutama resource lintas origin, perilakunya juga dipengaruhi oleh konfigurasi server seperti Content-Disposition.

Jadi, jangan menganggap download sebagai tombol ajaib yang selalu memaksa semua browser mengunduh file.

Cara Membuat Gambar Menjadi Link

Bukan hanya teks yang bisa dijadikan link. Gambar juga dapat ditempatkan di dalam elemen <a>.

Contohnya:

<a href="https://example.com/">
  <img src="gambar.jpg" alt="Kunjungi Example">
</a>

Sekarang ketika gambar diklik, pengguna akan diarahkan ke URL yang ditentukan.

Cara ini sering digunakan untuk logo, banner, kartu artikel, atau thumbnail yang dapat diklik.

Pastikan gambar tetap memiliki alt yang menjelaskan isi atau fungsi gambar agar lebih mudah dipahami ketika gambar tidak dapat ditampilkan dan bagi pengguna teknologi pembaca layar.

Atribut HTML Link yang Perlu Kamu Kenal

Setelah memahami sintaks dasar, ada beberapa atribut <a> yang cukup sering digunakan.

Atribut Fungsi
href Menentukan tujuan link
target Menentukan tempat link dibuka
rel Menjelaskan hubungan dengan halaman tujuan
download Menyatakan bahwa resource ditujukan untuk diunduh
hreflang Memberikan informasi bahasa halaman tujuan
title Memberikan informasi tambahan tentang link

Atribut href adalah bagian paling penting karena tanpa atribut tersebut elemen <a> tidak membuat hyperlink. Sementara target, download, rel, dan atribut lainnya dipakai sesuai kebutuhan.

Cara Membuat Link HTML yang Lebih Baik untuk SEO

Membuat link memang mudah. Membuat link yang nyaman untuk pengguna dan masuk akal secara struktur, itu yang lebih penting.

Salah satu kebiasaan yang bagus adalah menggunakan anchor text yang deskriptif.

Misalnya:

<a href="/belajar-html">
  Belajar HTML untuk Pemula
</a>

Lebih informatif daripada:

<a href="/belajar-html">
  Klik di sini
</a>

Teks seperti “Belajar HTML untuk Pemula” memberi gambaran yang lebih jelas tentang halaman tujuan. Google juga menekankan pentingnya anchor text yang deskriptif, termasuk dari sisi aksesibilitas.

Bukan berarti setiap link harus dipenuhi keyword. Justru jangan begitu.

Kalau konteks kalimat sudah jelas, tulislah seperti manusia berbicara:

<a href="/panduan-css">
  pelajari dasar CSS
</a>

Bukan:

<a href="/panduan-css">
  belajar CSS dasar CSS tutorial CSS terbaik
</a>

Yang kedua terlihat seperti sedang bernegosiasi dengan robot pencari, bukan sedang membantu pembaca.

Google juga secara jelas memasukkan keyword stuffing dan link spam sebagai praktik yang tidak boleh digunakan untuk memanipulasi hasil penelusuran.

Kesalahan yang Sering Dilakukan Saat Membuat Link HTML

Ada beberapa kesalahan kecil yang sering membuat link tidak bekerja.

1. Lupa Menulis https://

Contoh:

<a href="example.com">Example</a>

Untuk link eksternal, lebih aman dan jelas menggunakan URL lengkap:

<a href="https://example.com/">Example</a>

2. Salah Menulis Nama File

Misalnya file sebenarnya bernama:

about.html

tetapi kode menggunakan:

<a href="about-us.html">Tentang Kami</a>

Browser tentu tidak bisa menemukan file yang dimaksud.

3. Salah Menentukan Path

Misalnya file berada di:

pages/about.html

tetapi kamu menulis:

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

Path tersebut hanya benar kalau about.html berada di lokasi yang sesuai dengan dokumen saat ini.

4. Menggunakan Anchor Text yang Tidak Jelas

Link seperti:

<a href="/tutorial-html">Klik di sini</a>

memang bekerja, tetapi:

<a href="/tutorial-html">Tutorial HTML untuk Pemula</a>

memberikan konteks yang jauh lebih baik kepada pembaca.

5. Membuat Link Hanya untuk SEO

Ini juga perlu dihindari. Jangan memasukkan link sebanyak-banyaknya hanya karena ingin memberikan sinyal tertentu kepada mesin pencari.

Link seharusnya membantu pengguna berpindah ke informasi yang memang relevan.

Google bahkan mengategorikan link spam sebagai praktik manipulatif ketika link dibuat terutama untuk memengaruhi ranking.

Contoh Halaman HTML dengan Beberapa Jenis Link

Supaya semuanya terasa lebih nyata, berikut contoh sederhana yang bisa langsung kamu coba:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Link HTML</title>
</head>
<body>

  <h1>Belajar Link HTML</h1>

  <p>
    <a href="https://developer.mozilla.org/">
      Belajar HTML di MDN
    </a>
  </p>

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

  <p>
    <a href="https://example.com/" target="_blank" rel="noopener">
      Buka Website Contoh
    </a>
  </p>

  <p>
    <a href="#kontak">
      Lompat ke bagian kontak
    </a>
  </p>

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

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

  <p>
    <a href="dokumen.pdf" download>
      Download PDF
    </a>
  </p>

  <h2 id="kontak">Kontak</h2>

  <p>
    Silakan hubungi kami melalui email atau telepon.
  </p>

</body>
</html>

Kalau kamu sedang belajar HTML dari nol, saya sarankan jangan langsung menghafalkan semua atribut. Cukup kuasai pola dasarnya dulu:

<a href="tujuan">Teks Link</a>

Setelah itu baru tambahkan target, rel, download, fragment #id, dan atribut lain ketika memang membutuhkannya.

Penutup

Sekarang kamu sudah tahu cara membuat link HTML, mulai dari link sederhana menggunakan <a href="">, link menuju halaman lain, website eksternal, bagian tertentu dalam halaman, email, nomor telepon, sampai download file.

Yang paling penting bukan membuat sebanyak mungkin link, tetapi membuat link yang jelas tujuannya dan berguna bagi pembaca. Kalau kamu sedang membangun website atau blog seperti adi prayitno, kebiasaan sederhana ini bakal terasa manfaatnya ketika jumlah halaman mulai bertambah.

Coba praktikkan beberapa contoh di atas dalam satu file index.html. Begitu link pertama berhasil diklik dan berpindah halaman, konsepnya biasanya langsung terasa jauh lebih mudah.

Tidak ada komentar