HTML a tag | belajar <a> element
Referensi Belajar HTML a tag. Tutorial dan panduan mengenai element <a>..</a> yang sering digunakan untuk membuat HTML link. mencakup penjelasan yang disertai contoh kode penggunaan sebagai referensi belajar HTML elemen <a>.
Deskripsi
Penjelasan HTML a (anchor link)
a menunjukkan sebuah anchor. Apa itu anchor? Anchor adalah teks yang menunjukkan awalan dan akhiran sebuah hypertext link. HTML <a> element digunakan untuk mendefinisikan sebuah hyperlink. Link dapat merujuk ke halaman yang sedang terbuka ataupun ke halaman lain (website lain).
Jika sebuah a element memiliki href attribute, maka element tersebut menunjukkan sebuah hyperlink (hypertext anchor), tetapi jika element tersebut tidak memiliki href attribute, maka element tersebut menunjukkan sebuah placeholder.
Attribute target, download, rel, href dan type tidak boleh digunakan jika pada element a tersebut tidak disebutkan href attribute.
Jika itemprop attribute disebutkan (ditulis) pada a element, maka hrefattribute juga harus ditulis pada element tersebut.
Attributes
Atribut HTML Tag <a>
Menunjukkan bahwa target dari link tersebut akan didownload ketika user mengkliknya.
Contoh 1:
<a href="/media/images/apacaracom.png" download>Download logo apacara.com</a>Contoh 2:
<a href="/media/images/apacaracom.png" download="apacaradotcom">Download logo apacara.com</a>Contoh diatas (Contoh 2) ketika didownload akan berubah nama menjadi "apacaradotcom.png", tetapi jika download attribute tidak memiliki value (Contoh 1) maka nama file akan sesuai aslinya (apacaracom.png).
Menentukkan alamat URL atau nama ID halaman atau element yang akan dituju.
Contoh 1:
<a href="https://www.apacara.com/">Kunjungi apacara.com</a>Contoh 2:
<a href="#content">Skip to main content</a>Contoh 3:
<a href="javascript:alert('Hai Sobat!');">Tampilkan dialog</a>Contoh 4:
<a href="mailto:contohemail1@domain.com,contohemail2@domain.com?cc=contohemail3@domain.com&bcc=contohemail4@domain.com&subject=Salam%20Kenal&body=Hai%20Salam%20Kenal%0Adari%20dul" target="_top">Kirim Email!</a>Lihat keterangan dan hasil dari contoh-contoh diatas dengan mengklik link code editor yang kami berikan dibawah halaman.
Menentukkan bahasa yang digunakan pada halaman yang di link.
Contoh:
<a href="https://www.apacara.com/" hreflang="id">Kunjungi apacara.com</a>Menentukkan media query yang digunakan pada dokumen yang dirujuk oleh link tersebut.
Contoh:
<a href="/print.php?element=a" media="print and (resolution:300dpi)">Cetak Halaman</a>Menentukkan hubungan (relationship) antara dokumen yang sedang dibuka dan dokumen lain yang dirujuk oleh link tersebut.
Contoh:
<a href="http://www.apacara.com" rel="nofollow">apacara.com</a>Contoh diatas (rel="nofollow") sering digunakan apabila kita mereferensikan halaman web lain dengan maksud untuk menginstruksikan search engine supaya tidak mengikuti link tersebut dan tidak memasukkannya dalam search engine ranking.
Menentukkan konteks jelajah dokumen yang di link, bagaimana cara membuka halaman yang dirujuk dari link tersebut?
Contoh:
<a href="https://www.apacara.com/" target="_blank">Kunjungi apacara.com</a>Contoh diatas membuka halaman apacara.com dengan jendela baru (tab baru) ketika diklik.
Menentukkan tipe media dari halaman yang di link. Tipe media dapat dilihat selengkapnya di IANA Media Types
Contoh:
<a href="http://www.apacara.com" type="text/html" >Kunjungi apacara.com</a>Global Attributes
Atribut Secara Global (Keseluruhan)
<a> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<a> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <a> element
Membuat HTML Link Sederhana
<a href="http://www.apacara.com">Kunjungi apacara.com</a>
Contoh Lengkap
Contoh source code lengkap disertai dengan demo (preview) hasil output kode (klik link demo).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>Contoh Link Sederhana</p>
<a href="http://www.apacara.com">Kunjungi apacara.com</a>
<hr >
<p>Contoh link dengan JavaScript</p>
<a href="javascript:alert('Hai Sobat!');">Tampilkan dialog</a>
<hr class="uk-article-divider" />
<p>Contoh Email Link</p>
<a href="mailto:contohemail1@domain.com,contohemail2@domain.com?cc=contohemail3@domain.com&bcc=contohemail4@domain.com&subject=Salam%20Kenal&body=Hai%20Salam%20Kenal%0Adari%20dul" target="_top">Kirim Email!</a>
</body>
</html>
SHARE