Atribut href Tag HTML <a>

Tanda <a> HTML

Definisi dan Penggunaan

href Atribut menentukan URL halaman yang dituju tautan.

href Nilai atribut dapat berupa URL relatif atau absolut ke dokumen yang berlaku, termasuk identifikasi fragmen dan kode JavaScript. Jika pengguna memilih konten tag <a>, peramban akan mencoba mengambil dan menampilkan href Atribut yang ditentukan URL dokumen yang diwakili, atau daftar ekspresi, metode, dan fungsi JavaScript.

Jika href Jika atribut tidak ada, tag <a> tidak akan menjadi tautan.

Petunjuk:Anda dapat menghubungkan ke puncak halaman saat ini dengan href="#top" atau href="#"!

Buat Tautan Teks

Sebuah tag <a> yang mengacu ke dokumen lain dapat berbentuk seperti ini:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Tutorial</a>

Peramban menampilkan frasa "CodeW3C.com Tutorial Online" (biasanya teks biru dengan garis bawah), sehingga pengguna akan mengetahui bahwa itu adalah tautan yang dapat dihubungkan ke dokumen lain. Seperti ini:

CodeW3C.com Tutorial Online

Pengguna dapat menggunakan opsi di peramban untuk menentukan warna teks sendiri, serta mengatur warna teks sebelum dan setelah tautan.

Petunjuk:Dapat digunakan Pseudoklas CSSMenambahkan gaya yang kompleks dan beragam ke tautan teks.

Buat tautan gambar

Anchors yang lebih kompleks dapat mengandung gambar. LOGO di bawah ini adalah tautan gambar, ketika Anda klik gambar ini, Anda dapat kembali ke halaman utama W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Kode di atas akan menambahkan tautan kembali ke halaman utama CodeW3C.com untuk LOGO CodeW3C.com:

CodeW3C.com Tutorial Online

Sebagian besar peramban grafis akan menempatkan garis batas khusus di sekeliling gambar yang berfungsi sebagai bagian dari tautan. Dengan menempatkan gambar di dalam tag <img> seperti berikut, Atribut borderDengan mengatur 0 dapat menghapus garis batas tautan. Juga dapat digunakan Atribut garis batas CSSUntuk mengubah gaya garis batas elemen secara global.

Contoh

Contoh 1

Atribut href menentukan tujuan tautan:

<a href="https://www.codew3c.com">Buka CodeW3C.com</a>

Coba Sendiri

Contoh 2

Bagaimana cara menggunakan gambar sebagai tautan:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Coba Sendiri

Contoh 3

Bagaimana cara menghubungkan ke alamat email:

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

Coba Sendiri

Contoh 4

Bagaimana cara menghubungkan ke nomor telepon:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Coba Sendiri

Contoh 5

Bagaimana cara menghubungkan ke bagian lain di halaman yang sama:

<a href="#section2">Pergi ke Bab 2</a>

Coba Sendiri

Contoh 6

Bagaimana cara menghubungkan ke JavaScript:

<a href="javascript:alert('Hello World!');">Lakukan JavaScript</a>

Coba Sendiri

Syntax

<a href="URL">

Nilai properti

Nilai Deskripsi
URL

URL tautan.

Nilai yang mungkin:

  • URL Absolut - Menunjuk ke situs lain (seperti href="http://www.example.com/index.html")
  • URL Relatif - Menunjuk ke berkas di dalam situs (seperti href="index.html")
  • Menghubungkan ke elemen yang memiliki id yang ditentukan di halaman (seperti href="#section2")
  • Protokol lain (seperti https://, ftp://, mailto:, file: dll.)
  • Skrip (seperti href="javascript:alert('Hello');")

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda <a> HTML