Mengenal HTML Tag A dan Cara Kerjanya dalam Membuat Link di Website

by

Dalam pengembangan web, navigasi antar halaman maupun antar bagian informasi sangat penting untuk memberikan pengalaman pengguna yang baik. Salah satu elemen dasar yang digunakan untuk kebutuhan tersebut adalah HTML tag <a>, yang berfungsi sebagai penghubung berbagai sumber atau halaman di dalam maupun di luar website.

Apa Itu HTML Tag A

tag <a> (anchor tag) adalah elemen HTML yang digunakan untuk membuat hyperlink atau tautan (link) di dalam halaman web. Dengan menggunakan tag ini, pengguna dapat dengan mudah berpindah dari satu halaman ke halaman lain, baik dalam website yang sama maupun ke website eksternal.

Fungsi utama dari tag <a> adalah menghubungkan berbagai sumber informasi. Misalnya, link dapat digunakan untuk membuka halaman lain, mengunduh file, atau mengarahkan pengguna ke bagian tertentu dalam halaman yang sama. Hal ini menjadikan <a> sebagai salah satu elemen paling penting dalam membangun struktur navigasi sebuah website.

Tag <a> bekerja menggunakan atribut utama yaitu href (hypertext reference). Atribut ini menentukan tujuan dari link, seperti URL halaman web, file, atau jenis aksi lainnya. Selain itu, terdapat juga atribut tambahan seperti target, yang digunakan untuk menentukan apakah link dibuka di tab yang sama atau tab baru.

Tidak hanya untuk berpindah halaman, tag <a> juga dapat digunakan untuk berbagai keperluan lain, seperti:

  • Membuka email menggunakan format mailto:
  • Melakukan panggilan telepon dengan tel: (umumnya di perangkat mobile)
  • Membuka aplikasi tertentu, seperti WhatsApp melalui link khusus
  • Mengarah ke bagian tertentu dalam halaman menggunakan anchor (id)

Selain fungsi dasarnya, tampilan link juga dapat disesuaikan menggunakan CSS, seperti mengubah warna teks, menambahkan efek hover, atau menghilangkan garis bawah (underline). Dengan desain yang tepat, link dapat dibuat lebih menarik dan mudah dikenali oleh pengguna.

Dalam pengembangan web modern, tag <a> tidak hanya berfungsi sebagai navigasi, tetapi juga berperan penting dalam pengalaman pengguna (user experience) dan struktur informasi website. Oleh karena itu, penggunaan link yang jelas dan terstruktur akan membantu pengguna menjelajahi website dengan lebih nyaman dan efisien.

Tag ini sangat penting dalam pembuatan website karena berperan besar dalam navigasi dan optimasi SEO.

Struktur Dasar Tag A

Struktur paling sederhana dari tag A adalah:

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

Atribut href menentukan alamat tujuan link, sedangkan teks di dalam tag adalah bagian yang dapat diklik oleh pengguna.

1. Link ke Halaman Web Lain

Fungsi paling umum dari tag A adalah membuat tautan ke halaman web lain. Biasanya digunakan untuk navigasi antar halaman atau link eksternal.

Kode: 
<a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">Kunjungi Facebook</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
    <h2>Contoh Link ke halaman internal & ke external</h2>
	
	<p><b>Link Internal</b> - Saat link dibuka, pengguna akan dibawa ke halaman yang di tuju (example).</p>
	<a href="/example/halaman/">Link Internal</a>
	
	<p><b>Link External</b> - Saat link eksternal dibuka, halaman akan tampil di tab baru mengarah ke (facebook).</p>
    <a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" class="btn">Kunjungi Facebook</a>
	<!-- Gunakan Tombol [Run Browser] Agar Link External bisa berfungsi.-->
</body>
</html>

Penjelasan:

  • href → alamat tujuan (https://www.facebook.com)
  • target="_blank" → membuka link di tab baru
  • rel="noopener noreferrer" → meningkatkan keamanan saat membuka tab baru

2. Mengirim Email

Tag A dapat membuka aplikasi email default pengguna dengan alamat penerima dan subjek yang sudah ditentukan.

Kode: 
<a href="mailto:someone@example.com?subject=Halo">Kirim Email</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Kirim Email Langsung</h2>
	<p>Klik tombol di bawah untuk membuka aplikasi email dan mengirim pesan secara langsung.</p>

	<a href="mailto:someone@example.com?subject=Halo" class="btn">Kirim Email</a>
</body>
</html>

Penjelasan:

  • mailto: → membuka aplikasi email default di perangkat
  • someone@example.com → alamat email tujuan
  • ?subject=Halo → otomatis mengisi subject/judul email dengan teks "Halo"
  • Teks di antara <a>...</a> → teks yang ditampilkan di halaman

Jika diklik, akan langsung membuka aplikasi email dengan alamat dan subject yang sudah terisi.

3. Link Telepon

Link telepon sangat berguna untuk website mobile karena memungkinkan pengguna langsung melakukan panggilan.

Kode: 
<a href="tel:+628123456789">Hubungi Kami</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Hubungi Kami Melalui Telepon</h2>
	<p>Klik tombol di bawah untuk langsung melakukan panggilan telepon ke nomor yang tersedia.</p>

	<a href="tel:+628123456789" class="btn">Hubungi Kami</a>
</body>
</html>

Penjelasan

  • tel: → membuka aplikasi telepon di perangkat
  • +628123456789 → nomor tujuan (gunakan format internasional agar lebih aman)
  • Teks di antara <a>...</a> → teks yang tampil di halaman

Jika diklik:

  • Di smartphone → langsung membuka dialer dengan nomor terisi
  • Di laptop/PC → biasanya akan meminta memilih aplikasi (Skype, dll.) atau tidak bereaksi jika tidak ada aplikasi telepon

4. Link Download File

Atribut download digunakan untuk membuat link unduhan file seperti PDF, gambar, atau dokumen.

Kode: 
<a href="/example/files/ebook.pdf" download>Unduh Ebook</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<!-- Gunakan Tombol [Run Browser] Agar Link External, dan Anchor bisa berfungsi.-->
	<h2>Unduh File Ebook</h2>
	<p>Klik tombol di bawah untuk mengunduh file ebook secara langsung ke perangkat Anda.</p>

	<a href="/example/files/ebook.pdf" download class="btn">Unduh Ebook</a>
</body>
</html>

Penjelasan:

  • href="/example/files/ebook.pdf" → lokasi file yang akan diunduh
  • download → memaksa browser untuk mengunduh file, bukan membukanya di tab baru
  • Teks di antara <a>...</a> → teks yang tampil di halaman

Cara kerja:

  • Saat diklik → file langsung terunduh
  • Bisa juga diberi nama khusus:

5. Navigasi dalam Halaman yang Sama

Digunakan untuk membuat anchor link yang mengarahkan pengguna ke bagian tertentu dalam halaman yang sama.

Kode: 
<a href="#bagian1">Lompat ke Bagian 1</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<!-- Gunakan Tombol [Run Browser] Agar Link External, dan Anchor bisa berfungsi.-->
    <h2 id="top">Contoh Anchor Link</h2>
	<p>Anchor link digunakan untuk mengarahkan pengguna ke bagian tertentu dalam halaman yang sama tanpa perlu menggulir secara manual. Fitur ini sangat berguna untuk halaman panjang seperti artikel atau dokumentasi.</p>


    <a href="#bagian1" class="btn">
        Lompat ke Bagian 1
    </a>
	<a href="#bagian2" class="btn">
        Lompat ke Bagian 2
    </a>

	<div class="spacer"></div>
    <div id="bagian1">
        Bagian 1 <br>
      <a href="#top" class="btn">Kembali</a>
    </div>
  
	<div class="spacer"></div> 
    <div id="bagian2">
        Bagian 2 <br>
      <a href="#top" class="btn">Kembali</a>
    </div>
	<div class="spacer"></div>
</body>
</html>

Penjelasan:

  • href="#bagian1" → tanda # berarti menuju ID dalam halaman yang sama
  • id="bagian1" → penanda lokasi tujuan
  • Saat link diklik → halaman akan scroll ke elemen dengan ID tersebut

Cara Kerja:

  1. Link memiliki #namaID
  2. Elemen tujuan harus memiliki id="namaID"
  3. Browser otomatis melompat (atau scroll) ke posisi tersebut

Biasanya digunakan untuk:

  • Menu navigasi satu halaman (landing page)
  • Daftar isi artikel panjang
  • Tombol "Kembali ke Atas"

6. Link Media Sosial

Tag A sering digunakan untuk menghubungkan website dengan profil media sosial.

Kode: 
<a href="https://instagram.com/username" target="_blank" rel="noopener noreferrer">Kunjungi Instagram</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Kunjungi Halaman Instagram</h2>
	<p>Gunakan tombol berikut untuk membuka profil Instagram di tab baru browser.</p>

	<a href="https://instagram.com/username" 
	   target="_blank" 
	   rel="noopener noreferrer" 
	   class="btn">
		Kunjungi Instagram
	</a>
</body>
</html>

Penjelasan:

  • href="https://instagram.com/username" → alamat profil Instagram tujuan
  • target="_blank" → membuka di tab baru
  • rel="noopener noreferrer" → meningkatkan keamanan saat membuka tab baru
  • Teks di antara <a>...</a> → teks yang tampil di halaman

Kenapa pakai rel="noopener noreferrer"?

Untuk mencegah halaman baru mengakses window.opener dari halaman asal (lebih aman dari potensi serangan).

Biasanya dipakai untuk:

  • Social media
  • Website eksternal
  • Marketplace
  • Portofolio

7. Chat WhatsApp

Link WhatsApp memungkinkan pengunjung langsung membuka percakapan dengan pesan otomatis.

Kode: 
<a href="https://wa.me/628123456789?text=Halo" target="_blank" rel="noopener noreferrer">Chat WhatsApp</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Hubungi Kami via WhatsApp</h2>
	<p>Gunakan tombol berikut untuk membuka percakapan WhatsApp dan langsung mengirim pesan ke kontak yang tersedia.</p>

	<a href="https://wa.me/628123456789?text=Halo%20saya%20ingin%20bertanya" 
	   target="_blank" 
	   rel="noopener noreferrer" 
	   class="btn">
		Chat WhatsApp
	</a>
</body>
</html>

Penjelasan:

  • https://wa.me/628123456789 → format resmi link WhatsApp (gunakan kode negara, tanpa tanda +)
  • ?text=Halo%20saya%20ingin%20bertanya → pesan otomatis yang sudah di-encode
    • Spasi harus ditulis %20
  • target="_blank" → buka tab baru
  • rel="noopener noreferrer" → keamanan tambahan

Hasilnya:

Saat diklik:

  • Di HP → langsung membuka chat WhatsApp
  • Di Laptop → membuka WhatsApp Web

8. Link Video

Tag A dapat digunakan untuk membuka atau mengunduh file video.

Kode: 
<a href="/example/video.mp4">Tonton Video</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Tonton Video</h2>
	<p>Coba klik tombol berikut untuk memutar video yang tersedia di halaman atau membuka file video.</p>

	<a href="/example/video.mp4" class="btn">Tonton Video</a>
</body>
</html>

Penjelasan:

  • href="/example/video.mp4" → lokasi file video
  • Tanpa atribut tambahan → browser biasanya akan:
    • Membuka video di tab baru
    • Atau langsung memutar di browser (tergantung pengaturan server & browser)

9. Link Audio

Digunakan untuk mengakses file audio seperti podcast atau musik.

Kode: 
<a href="/example/audio.mp3">Putar Audio</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Putar File Audio</h2>
	<p>Yuk Coba Klik tombol berikut untuk memutar atau mengakses file audio yang tersedia.</p>

	<a href="/example/audio.mp3" class="btn">Putar Audio</a>
</body>
</html>

Penjelasan:

  • href="/example/audio.mp3" → lokasi file audio
  • Tanpa atribut tambahan → browser biasanya akan:
    • Membuka file audio di tab baru
    • Atau langsung memutarnya di browser

10. Link dengan Parameter URL

Parameter URL digunakan untuk pencarian atau pengiriman data ke server.

Kode: 
<a href="https://example.com/search?q=html">Cari HTML</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Pencarian dengan Parameter URL</h2>
	<p>Gunakan tombol berikut untuk melakukan pencarian dengan kata kunci yang sudah ditentukan melalui parameter URL.</p>

	<a href="https://example.com/search?q=html" class="btn">Cari HTML</a>
</body>
</html>

Penjelasan:

  • https://example.com/search → alamat halaman tujuan
  • ?q=html → query parameter
    • ? → penanda awal parameter
    • q → nama parameter
    • html → nilai parameter

Artinya: kita mengirim data q=html ke halaman tersebut.

11. Link ke Halaman Tertentu dalam PDF

Memungkinkan pengguna langsung membuka halaman tertentu dalam file PDF.

Kode: 
<a href="/example/document.pdf#page=2">Buka Halaman 2</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<!-- Gunakan Tombol [Run Browser] Agar Link External, dan Anchor bisa berfungsi.-->
	<h2>Membuka PDF pada Halaman Tertentu</h2>
	<p>Gunakan tombol di bawah untuk membuka dokumen PDF langsung pada halaman yang dipilih.</p>

	<a href="/example/document.pdf#page=2" class="btn">Buka Halaman 2</a>
	<a href="/example/document.pdf#page=3" class="btn">Buka Halaman 3</a>
	<a href="/example/document.pdf#page=4" class="btn">Buka Halaman 4</a>
</body>
</html>

Penjelasan:

  • /example/document.pdf → lokasi file PDF
  • #page=2 → instruksi untuk membuka PDF langsung ke halaman 2
  • # → disebut fragment identifier
  • page=2 → parameter khusus yang dipahami oleh viewer PDF browser

Cara Kerja:

Saat diklik:

  • Browser membuka file PDF
  • Otomatis langsung lompat ke halaman 2 (jika browser mendukung fitur ini)

12. Cetak Halaman

Link ini menjalankan perintah JavaScript untuk mencetak halaman.

Kode: 
<a href="#" onclick="window.print(); return false;">Cetak Halaman</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Cetak Halaman</h2>
	<p>Klik tombol berikut di bawah ini untuk mencetak halaman ini langsung melalui browser Anda.</p>

	<a href="#" onclick="window.print(); return false;" class="btn">Cetak Halaman</a>
	
	<p>Ini adalah contoh konten yang akan dicetak saat tombol ditekan.</p>
</body>
</html>

Penjelasan:

  • href="#" → agar tetap berupa link
  • onclick="window.print();" → menjalankan fungsi JavaScript untuk membuka dialog print
  • return false; → mencegah link berpindah ke #
  • window.print() → perintah bawaan JavaScript untuk mencetak halaman

Cara Kerja:

Saat diklik:

  • Browser membuka dialog Print
  • Pengguna bisa pilih printer atau simpan sebagai PDF

13. Membuka Jendela Pop-up

Dapat digunakan untuk membuka halaman dalam jendela kecil terpisah.

Kode: 
<a href="https://example.com" onclick="window.open(this.href,'popup','width=500,height=500'); return false;">Buka Pop-up</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Membuka Halaman dalam Pop-up</h2>
	<p>Klik tombol berikut untuk membuka halaman di jendela pop-up berukuran kecil tanpa meninggalkan halaman utama.</p>

	<a href="https://example.com"
	   onclick="window.open(this.href,'popup','width=500,height=500'); return false;"
	   class="btn">
		Buka Pop-up
	</a>
</body>
</html>

Penjelasan:

  • href="https://example.com" → alamat tujuan
  • onclick="..." → menjalankan JavaScript saat diklik
  • window.open() → membuka jendela baru
  • 'popup' → nama jendela
  • 'width=500,height=500' → ukuran pop-up
  • return false; → mencegah link terbuka normal

Catatan Penting

  • Beberapa browser bisa memblokir pop-up jika dianggap tidak aman
  • Pop-up hanya bisa dipicu oleh aksi klik user (tidak otomatis)

14. Link ke Bagian Halaman Eksternal

Mengarah ke bagian tertentu dari halaman website lain.

Kode: 
<a href="https://example.com#section2">Ke Bagian Tertentu</a>
Contoh Penggunaan: 
<!DOCTYPE html>
<html>
<body>
	<h2>Mengarahkan ke Bagian Tertentu pada Halaman Lain</h2>
	<p>Gunakan tombol di bawah untuk langsung menuju bagian tertentu pada halaman website lain tanpa harus menggulir dari awal.</p>

	<a href="https://cicagak.com/example/halaman/#section2" class="btn">Ke Bagian 2</a>
	<a href="https://cicagak.com/example/halaman/#section3" class="btn">Ke Bagian 3</a>
	<a href="https://cicagak.com/example/halaman/#section4" class="btn">Ke Bagian 4</a>
</body>
</html>

Link ke bagian halaman eksternal adalah tautan yang tidak hanya mengarahkan pengguna ke sebuah website lain, tetapi langsung menuju ke bagian tertentu di dalam halaman tersebut. Hal ini dilakukan dengan menambahkan tanda # (fragment identifier) di akhir URL yang merujuk pada elemen dengan id tertentu di halaman tujuan.

Fitur ini sangat berguna untuk mempercepat akses informasi, karena pengguna tidak perlu menggulir halaman dari awal untuk menemukan bagian yang diinginkan.

Atribut Penting Tag A

Berikut adalah atribut yang paling sering digunakan pada HTML tag <a> dan wajib dipahami oleh pemula:

Atribut Fungsi Contoh
href Menentukan alamat tujuan tautan <a href="https://example.com">
target Mengatur cara membuka link (tab baru atau sama) <a target="_blank">
rel Menambah keamanan dan optimasi SEO <a rel="noopener noreferrer">
download Mengunduh file saat link diklik <a download>
title Menampilkan keterangan saat kursor diarahkan <a title="Info">
id Memberi identitas unik elemen <a id="menu">
class Digunakan untuk styling CSS <a class="btn">

Atribut Lanjutan Tag A

Atribut berikut biasanya digunakan pada pengembangan website tingkat lanjut:

Atribut Fungsi Contoh
hreflang Menentukan bahasa halaman tujuan <a hreflang="id">
type Menentukan tipe file tujuan <a type="application/pdf">
referrerpolicy Mengontrol informasi referrer yang dikirim <a referrerpolicy="no-referrer">
ping Mengirim notifikasi tracking saat link diklik <a ping="/track">
accesskey Membuat shortcut keyboard <a accesskey="h">
tabindex Mengatur urutan navigasi keyboard <a tabindex="1">

Manfaat HTML Tag A untuk SEO

  • Memperkuat internal linking website
  • Membantu mesin pencari memahami struktur halaman
  • Meningkatkan pengalaman pengguna
  • Anchor text relevan membantu peringkat pencarian

Best Practice Penggunaan Tag A

  • Gunakan teks link yang jelas dan deskriptif
  • Tambahkan rel="noopener noreferrer" untuk link eksternal
  • Hindari broken link
  • Gunakan internal linking secara strategis
  • Jangan berlebihan menggunakan link

Kesimpulan

Tag <a> merupakan elemen penting dalam pembuatan hyperlink dan navigasi pada website. Dengan memahami fungsi serta cara penggunaannya, Anda dapat membangun struktur navigasi yang lebih baik, meningkatkan pengalaman pengguna, serta membantu optimasi SEO pada website.

Artikel Terkait
dokumentasi tag HTML lengkap
dokumentasi atribut HTML lengkap
Avatar photo

Agus Sopian

Hobi saya adalah coding dan mempelajari dunia website serta teknologi sejak masa SMK. Melalui blog ini, saya berbagi pengalaman, tutorial, dan perjalanan belajar saya di dunia programming & web development.

Leave a Comment

Responsive — 100%